3

Is it possible to auto submit a select menu when the selection changes without using a button to submit the form. I have four of these on my page and using a button for each uses up too much space. By Select Menu, I mean:

<select name="something" class="something" title="something something">
  <option selected="selected">Option One</option>
  <option >Option Two</option>
</select>

I would also like to add a confirm popup for the on change event. The following is what I use for buttons but it does not work for the select menu.

onclick="return confirm('do you haz teh codz?');"

Any link to articles tutorials or examples would be greatly appreciated!

Thanks

Improve this question
1
  • 1
    Like the others said, you can't do this with PHP; it is a Javascript task. I've retagged as such Commented Oct 27, 2010 at 2:57

4 Answers 4

Reset to default
6

This is more appropriately tagged 'javascript' since it's javascript that you'll use to do it.

Add an 'onchange' event to the select. In the example below, 'form' should be substituted for your favourite method of targeting the form node.

<select name="something" class="something" title="something something" onchange="form.submit()">
<option selected="selected">Option One</option>
  <option >Option Two</option>
</select>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I have to agree with this one. On a change to the select menu, submit the menu's parent form...
2

You need a JavaScript solution, not a PHP solution. PHP can only handle form data after it's been sent to the server; i.e., when the form has been submitted.

You can use JavaScript to:

  1. Add an event listener to the <select> to trigger when it changes (onchange).
  2. When the <select> changes, get its current value.
  3. Based on the value, redirect the user (change window.location) to the page you want them to go to.

Edit: I re-read your question and if you are just looking to submit the form when the user changes the <select>, then mwotton's answer is probably the way to go. (Of course, move the JavaScript away from the HTML; it doesn't belong there.)

For your confirmation, you can do something like this:

document.getElementById('my-select').onchange = function(){
    return confirm('do you haz teh codz?');
});

(It's always a good idea to keep your JavaScript away from your HTML. So just give your <select> an ID like id="my-select" and you can access it from the JavaScript. You can also use a JavaScript library like jQuery to greatly ease your JavaScript programming.)

Improve this answer

8 Comments

josh, but how can I tell which select box was submitted and which select option was selected? thanks
You would have to either reference one specifically or reference a group of them (e.g., those with class name "foo"), and then check their values when they change. But if you're just looking to submit the form, I would honestly go with mwotton's solution. If you don't just want to submit the form, let me know what exactly you need help with and I'll be happy to help.
Thank you! I have four select menus on the form each with several options. When the user selects an option I need to know which select box and select option was submitted so I can perform the appropriate action.
How do you want to perform the action? Do you want it to forward to your PHP script (as defined in <form action="action.php">), or do you want to redirect it to a different URL?
The form submits to itself. That is why I need to know what exactly was submitted. With button submit, I know how to look for which button was clicked but with select menu I'm not sure.
|
0

Well, you need to know the form name/id or something. Assuming <form id="selectform"> and <select id="selectelement">,

window.onload=function() {
  document.getElementById('selectelement').change = function() {
    if(confirm('do you haz teh codz?'))
      document.getElementById('selectform').submit();
    else
      return false;
    return true;
  }
}

The return false/true will determine whether or not to revert the select back to the original option.

Here's a test: http://jsfiddle.net/yrqcj/2/

Improve this answer

Comments

0

You can implement the onchange event for select object and inside the function make a reference to the form.submit();

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.