Php differentiating between javascript and user click?

First, this question is about JS only, no PHP involved,

About your original question there's no difference between a JS submit and a user click, a real difference would be only the event triggering the submit action (events click or change, where evt.target is the dom triggering the event).

As a recomendation bind your events using addEventListener instead of using directly the onchange attribute, it'll look like this:

document.getElementsByName('sub_id')[0].addEventListener("onchange", function(evt) {
    document.forms[0].submit();
});

Please try the following solutions:

1. Fix the input names:

From this:

<input type='hidden' name='Value2' value='BlogSection'>
<input type='hidden' name='Value3' value='BlogName'>

To this, accourding to your question they all should be lower case:

<input type='hidden' name='value2' value='BlogSection'>
<input type='hidden' name='value3' value='BlogName'>

2. Fix your JS onclick implementation:

From this:

  // unselect any selected item on the SELECT
  if( document.getElementsByName('subscribe_check').selectedIndex )
    document.getElementsByName('subscribe_check')[document.getElementsByName('subscribe_check').selectedIndex].selected = false;
  // select select the last option
  document.getElementsByName('subscribe_check')[1][3].selected = true;

To this, according to your question they should be pointing to sub_id, also watch the last line index (idx [1][3] doesn't exists, it should be [0][3]):

  // unselect any selected item on the SELECT
  if( document.getElementsByName('sub_id').selectedIndex )
    document.getElementsByName('sub_id')[document.getElementsByName('sub_id').selectedIndex].selected = false;
  // select select the last option
  document.getElementsByName('sub_id')[0][3].selected = true;

3. Execute the same submit function

Change your HTML from this:

<select class='forminput' name='sub_id' onchange='this.form.submit()'>

To this:

<select class='forminput' name='sub_id' onchange='document.forms[0].submit()'>

Also...

Just to be sure there's nothing else modifying your input values print them just after the onchange is triggered, like this... and also delay the submit and print them again, that should give a good look of whatever is happening:

document.getElementsByName('sub_id')[0].addEventListener("onchange", function(evt) {
    console.log(document.getElementsByName('value2'), document.getElementsByName('value3'));
    setTimeout(function() {
         console.log(document.getElementsByName('value2'), document.getElementsByName('value3'))
         document.forms[0].submit();
    },100);
});

PHP is server side only, so can't detect what happened in the DOM, meaning it won't know which event triggered the form submit.

You may have some JS that is altering the posted values.


there is some event-driven functionality is involved for updating Value2 and Value3, it's not working when you submitting the form by js.

In order to fix this issue, you need to trigger the event your self

    function autoFormSubmit(){
        var selectElement = document.querySelector('form[name="subscribe_check"] select[name="sub_id"]');//get the element
        selectElement.addEventListener('change',onchangeEventListener) //attaching onchange  Listener, you can do this in document ready function, if you have any
        selectElement.selectedIndex = selectElement.length -1;//choose last item
        selectElement.dispatchEvent(new Event('change'))//trigger change event;

    }

    function onchangeEventListener(event){ //change event listener
        event.preventDefault();
        var form = this.form;
        setTimeout(function(){
            form.submit();
        },500)//wait few milliseconds before submitting form
    }

you can remove

 onchange='this.form.submit()'

form html code

full code

var selectElement;

function autoFormSubmit() {
    selectElement.selectedIndex = selectElement.length - 1; //choose last item
    selectElement.dispatchEvent(new Event('change')) //trigger change event;

}

function onchangeEventListener(event) { //change event listener
    event.preventDefault();
    var form = this.form;
    setTimeout(function () {
        form.submit();
    }, 500) //wait few milliseconds before submitting form
}

document.onreadystatechange = function () {
    if (document.readyState === "complete") { //page is loaded 
        selectElement = document.querySelector('form[name="subscribe_check"] select[name="sub_id"]'); //getting element
        selectElement.addEventListener('change', onchangeEventListener) //attaching listner
        autoFormSubmit();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <form action='http://mywebsite.com/index.php?&act=MYFUNCTION&CODE=01&CookieDate=1' name='subscribe_check' method='POST'>
    <input type='hidden' name='value1' value='dynamicallygenerated'>
    <input type='hidden' name='Value2' value='BlogSection'>
    <input type='hidden' name='Value3' value='BlogName'>
    <select class='forminput' name='sub_id'>
      <option value='------------' selected='selected'>To read this article, you must choose a subscription level</option>
      <option value='1'>Subscribe to daily updates</option>
      <option value='2'>Subscribe to promotional emails</option>
      <option value='3'>No thanks, I'm not interested in being healthy</option>
    </select>
  </form>
</body>

</html>