Member Avatar for void64

I have a form with multiple SELECT drop-down menus. Each menu can submit the form using the onChange function. How can I determine which of the drop-down menus was used to submit the form?

Example:

<form method="post" enctype="multipart/form data" action="submit.php">

<select name="one" onChange="submit()">
   <option value="1">1st choice</option>
   <option value="2">2nd choice</option>
</select>

<select name="two" onChange="submit()">
   <option value="1">1st choice</option>
   <option value="2">2nd choice</option>
</select>

</form>

I know the selected values are passed to submit.php in the $_POST variable, but I also need to detect which of the two menus was used to submit the form (the form may be loaded with any combination of values pre-selected). How can I do this? Thanks!

PS: I think the best way would be to call a different submit URL for each onChange like "submit.php?source=one" and "submit.php?source=two", but I don't know how to use a different URL for each onChange=submit(). Are there parameters that can be passed when calling the "submit()" function?

I'd say the easiest way to do it would be to do something like

<form method="post" enctype="multipart/form data" action="submit.php">

<select name="one" onChange="submit('one')">
   <option value="1">1st choice</option>
   <option value="2">2nd choice</option>
</select>

<select name="two" onChange="submit('two')">
   <option value="1">1st choice</option>
   <option value="2">2nd choice</option>
</select>

</form>

And then add the ?source=one/two as you described.

The string one and two are passed in for the different submit functions.

Member Avatar for void64

Thank you twomers - it wasn't quite what I was looking for, but it was enough to jogg my brain and let me find the solution. The trick is to call a javascript function that modifies the submit action of the form and only then submit it.

<script type="text/javascript">
          function FormSubmit(x) {
                   document.myform.action = x;
                   document.myform.submit();
                   return;
                   }
  </script>

  <form method="post" name="myform">
  
      <select name="one" onChange="FormSubmit('submit.php?val=one')">
      <option value="1">1st choice</option>
      <option value="2">2nd choice</option>
      </select>
      
      <select name="two" onChange="FormSubmit('submit.php?val=two')">
      <option value="1">1st choice</option>
      <option value="2">2nd choice</option>
      </select>
  </form>

This will pass the name of the button which submitted the form as part of the submit URL :).

It might make more sense to do:

<script type="text/javascript">
          function FormSubmit(el) {
                   document.myform.action = 'test.html?val=' + el.name;
                   document.myform.submit();
                   return;
                   }
  </script>

  <form method="post" name="myform">
  
      <select name="one" onChange="FormSubmit(this)">
      <option value="1">1st choice</option>
      <option value="2">2nd choice</option>
      </select>
      
      <select name="two" onChange="FormSubmit(this)">
      <option value="1">1st choice</option>
      <option value="2">2nd choice</option>
      </select>
  </form>

I mean. Your solution works too. So it's just a matter of style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.