JavaScript submit

Question

This is a JavaScript question.

Given the following code:

<input type="button" name="applyFilter" value="Apply Filter" onClick="doSubmit('applyFilter')"/>
function doSubmit(action) {
f=document.forms[0];
f.action=action;
f.submit();
}

How can I obtain the form object of the button clicked within doSubmit()? Currently, you see a reference to forms[0] but I want this to work with multiple forms on the page and I do not want to pass in the form name/id/reference or the button object reference. The button is on a form and I hope doSubmit(action) function can get that form object.

• nnnnnn: Are the strings you're passing to doSubmit() somehow unique to different forms? If not, given you've said you won't do something like onclick="doSubmit('applyFilter',this); I don't see how you can get the form - as it stands the doSubmit() function doesn't even have a reference to the button so how can it work out which form is related to a button it doesn't know about? (In IE you could perhaps use window.event to get the details, but not in other browsers.)
• jacekn: @nnnnnn I understand this may not be possible but still, I wanted to ask, rather than assume.
• nnnnnn: If you're not able to change the markup I don't think it can be done. (If you can change the markup there are lots of possible solutions - if you insist on an inline handler you could even do away with the doSubmit() function entirely by changing the button to type="submit" and then using onclick="this.form.action='applyFilter';".)
• jacekn: Well, I am able to change the signature but I don't want to start adding doSubmit(this, 'action') all over my jsps only to find out at the end that passing button object reference isn't required. This is why I decided to ask here...

Answer 1

If you attach the listener dynamically you can use the related event object. There is no way to do it otherwise in a cross-browser way (IE has window.event but that isn't W3C compatible or supported by a good percentage of commonly used browsers).

Answer 2

Maybe you can try 'bubble' of event. I mean you can use event.target or event.srcElement.

• RobG: That requires the OP to pass the related event object from the listener, which can be done if the listener is attached dynamically or if the call is modified. But if the call is modified (which the OP doesn't want to do) then the button or form might as well be passed directly.

Answer 3

using jQuery

 $('input[type="button"]').on('click',function(){
 $(this).parents('form').submit(); 
 })​

http://jsfiddle.net/uM4c2/1/

• nnnnnn: Maybe you should read the question again: OP doesn't want to change the signature of the existing doSubmit() function.
• RobG: The body of the function is equivalent to this.form.submit(), which is more efficient and less to type. And not what the OP wants. If it was, it could be done directly from the inline listener.