CODEWITHSUNDEEP
phpjavascript
Illinger
Illinger

Reputation: 5

How do I get dropdowns in a PHP script to submit the form on change?

Ok... First off, I know this isn't a new question. But, for some reason none of the suggestions Google has found for me (dating back to the begining of time even) are working. So, please bear with me.

Let's say, I have a script structured something like this:

<?php
   try {
      print "<table><form id='menu' action='index.php' method='POST'><tr>";
      print "<td>Select A Fruit</td><td><select name=fruit>
         <option value=''></option>
         <option value='apple'>Apple</option>
         <option value='orange'>Orange</option>
         <option value='pear'>Pear</option></select></td></tr>";
      print "<tr><td><input type='submit' name='submit' value='Submit'></td></tr></form></table>";

      if (isset($_POST['submit'])){
         if (!empty($_POST['fruit'])){
            //Do whatever the form is supposed to trigger.
         }
         else {
           //Nothing selected; handle however makes sense.
         }
      }
   } 
   catch(Exception $e) {die( print_r( $e->getMessage() ) );}
?>

And instead of using the button, I want it to submit the form as soon as an option is selected.

Based on my searches, the textbook answer appears to be to modify the Select tag with an onchange attribute calling a JavaScript method like so:

<select name='fruit' onchange='document.getElementById('menu').submit()'>

or the short form:

<select name='fruit' onchange='this.form.submit()'>

But here is where I'm stuck... None of the posts I found explain where you tell the browser/interpreter to drop out to JavaScript to make that work. So, this change does nothing for me.

What am I missing here?

Upvotes: 0

Views: 107

Answers (3)

0b10011
0b10011

Reputation: 18785

I would suggest using an event listener rather than adding the attribute to your code. Also, it is recommended to have the static page display the submit button, and simply remove it via javascript after the page loads.

element.addEventListener Example

<script type="text/javascript">
 document.getElementById("yourSelectId").addEventListener("change", function(){document.forms["yourFormId"].submit();});
</script>

To read more about element.addEventListener (esp. to see why it's important to use it), check out the article on element.addEventListener at MDN.

How javascript works in onchange attribute

But here is where I'm stuck... None of the posts I found explain where you tell the browser/interpreter to drop out to JavaScript to make that work. So, this change does nothing for me.

Attributes such as onchange, onclick, etc (notice "on" at the beginning) parse the value as javascript. Ergo, that is where you are telling the browser to use javascript to make it work :)

Upvotes: 0

Adam Rackis
Adam Rackis

Reputation: 83358

I would get away from the dom level 0 handler and set the select's onchange handler to a function that grabs your form, and calls submit on it.

document.getElementById("yourSelectId").onchange = function() {
    document.forms["formsId"].submit();
};

I'm showing you a more robust way of adding event handlers to dom elements. Instead of saying onchange="blah()" you can set up a body onload function that'll run when your dom is ready, then you can use JavaScript to add your handlers: 

<body onload="init()">

function init() {  
    document.getElementById("yourSelectId").onchange = function() {
        document.forms["formsId"].submit();
    };
}

Or, you can skit the ugly <body onload="init()"> altogether and just put the code

    document.getElementById("yourSelectId").onchange = function() {
        document.forms["formsId"].submit();
    };

in a regular script block at the bottom of your body

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117314

  1. Your markup isn't valid, a table-element cannot have a form as child-element(wrap the form around the table)
  2. Choose another name for the submit-button, otherwise you will receive an error in IE when calling submit()

Upvotes: 0

Related Questions