dropdown on change submit not executing php code

1
votes

I have a form

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">

the form has multipe input type text and 1 dropdown menu.

I also have a submit button called (submit1)

<input class="submit-button" type="submit" name="submit1" value="UPDATE MY INFORMATION" />

My PHP read like this :

if (isset($_POST['submit1'])) 
{ .... }

If I press the button, it works, no problem.

BUT I also want to submit the form from the dropdown menu change... so it can be executed by both the press of the button OR the change in dropdown... so I have the following for my dropdown

<select name="country"  onchange="this.form.submit()">

when I select my dropdown, the page refreshed, but the code in my PHP is not executed... I figured it has to do with the name of $_POST['submit1']...

How can I change onchange="this.form.submit() for it to execute the code in if(isset($_POST['submit1']))...

Thank you

3
javascriptphpforms
The submit button name-value-pair is not send when you submit the form via JavaScript – so don’t check for that, check for something else that your form sends in any case. – CBroe

3 Answers

0
votes

You should avoid inline javascript like that. It's ugly, and reduces readability. The easier way would be to give your elements IDs, like so:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" id="myForm">

But if you don't want to, you can use QuerySelector and grab the name attribute of your input.

var x = document.querySelector("[name='country']");
x.addEventListener("change",function() {
    this.parentNode.submit(); //get form parent and submit
});

I'm a bit confused why you're checking the submit button for a value as well, wouldn't you want:

if (isset($_POST['country'])) { ... }

Instead?

0
votes

You could just document.getElementById('submit1').click() after setting the id on your submit button the same as its name. Of course, you would also do this onchange. I would separate my JavaScript from HTML, so it's cached into your Browser memory. Give your inputs, selects and the like the same id as their name, with the exception of radio buttons, and possibly checkboxes.

Let's start with some common.js:

//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

Now for your otherpage.php:

//<![CDATA[
var cntry = E('country'), sub1 = E('submit1');
cntry.onchange = function(){
  sub1.click();
}
// note that the format E('submit1').click(); would also work
//]]>

Of course, you should have:

  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='otherpage.js'></script>
</body>
</html>
0
votes

Check for isset($_POST['country']) And onchange add this to the drop-down,

onchange= 'document.getElementsByName("submit1")[0].click();'