Is there a way to determine which element submitted a form from within an onsubmit handler? Trying to write a generic handler that knows which element was clicked. For example, given this form:
<form onsubmit="onSubmitHandler">
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
</form>
How can I determine inside the onSubmitHandler which submit button was clicked? I tried event.target/event.srcElement, but that gives the form, not the actual submit button.
Update: I'm writing a generic control here, so it has no idea what's on the form. The solution needs to work without knowing and changing the html of the form. My fallback is walking the DOM to find all buttons that could cause a submit, but I'd like to avoid that.
Is there a way to determine which element submitted a form from within an onsubmit handler? Trying to write a generic handler that knows which element was clicked. For example, given this form:
<form onsubmit="onSubmitHandler">
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
</form>
How can I determine inside the onSubmitHandler which submit button was clicked? I tried event.target/event.srcElement, but that gives the form, not the actual submit button.
Update: I'm writing a generic control here, so it has no idea what's on the form. The solution needs to work without knowing and changing the html of the form. My fallback is walking the DOM to find all buttons that could cause a submit, but I'd like to avoid that.
Share Improve this question edited Feb 12, 2009 at 16:31 Chris Hynes asked Feb 12, 2009 at 15:43 Chris HynesChris Hynes 10.2k2 gold badges46 silver badges55 bronze badges 2- There's no guaranty that any submit buttons have been clicked. E.g. Submitting by JS (form.submit()) will result in no buttons value being included in the post back – Rune FS Commented Nov 15, 2010 at 9:06
- That's fine too. A little more background on the problem: this is for an AJAX ponent. I'm cancelling the first submit, doing my own thing, and then I need to rerun the first submit as it happened, with all the correct form values. As far as I've been able to determine, the only way to do this is to walk the DOM and add click handlers to anything that could cause a submit, and then save that. Assume the last thing that was clicked was the thing that submitted the form, and then call .click() on it when I need to resubmit the form. – Chris Hynes Commented Dec 1, 2010 at 20:24
5 Answers
Reset to default 3An alternative solution would be to move the event trigger from the form's submit event, to the submit element's onclick event, as such:
<form name='form1'>
<input type="submit" name="submit1" onclick="onSubmitHandler"/>
<input type="submit" name="submit2" onclick="onSubmitHandler"/>
</form>
In your handler function you can determine the submitting element simply by inspecting the event target's name, and if you need access to the form's information or other elements, you can get this from the submit elements "form" attribute.
I would not use a standard submit button-type.
Make the submit function take an extra argument which represents the element that submitted it, and the button would have an onclick that sends this as the parameter:
<input type="button" onclick="submitHandler(this)">
My fallback is walking the DOM to find all buttons that could cause a submit, but I'd like to avoid that.
...and adding click listeners to them to store the ‘last clicked’ button which is then read by the submit listener, right?
I can't think of any other way, sorry.
This solution works in Firefox. I haven't checked it in other pliant browsers or IE.
I'm not too hopeful for IE, you'd have to look into it and post your results.
<form id="myForm">
<input type="submit">
<input type="submit">
</form>
_
document.getElementById('myForm').addEventListener( 'submit', function( e ){
e.preventDefault();
e.explicitOriginalTarget.style.background = 'red';
}, false );
Click events bubble, so you could just add an "onclick" listener to the form itself, that checks if the click target source is a submit button; if so, store a reference to it somewhere associated with the form that you can access from your onsubmit handler.
If you want to handle "Enter"-submitted forms properly too, listen to the form's "onkeypress" or "onkeydown" event, check for "Enter", and clear your submit-button info if the event target ISN'T a submit button.