Php differentiating between javascript and user click?

Question

I am injecting javascript into a PHP website to avoid a pop-up, to submit a form automatically. Also, there is an issue with jquery so I am using plain javascript.

This is the form on the page:

<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' onchange='this.form.submit()'>
<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>

This is my javascript:

  // 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;
  // submit the form
  document.forms[0].submit();

When I manually click on the form, I know that these values are set

  value1: dynamicallygenerated
  value2: HealthyFoodSection
  value3: HealthyFoodFunBlog

But when my javascript submits the form, these values are submitted

  value1: dynamicallygenerated
  value2: BlogSection
  value3: BlogName

I am 100% sure there is no other javascript that is firing to change the values - there can't be, the onchange calls submit() directly.

I don't understand why my javascript submitting the form doesn't change the values like clicking it manually does? If there is PHP happening, I don't understand how it would even detect that my javascript submitted the form versus me clicking submit, a submit click is a submit click, right?

Answer 1

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);
});

Answer 2

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>