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>