asked on

How to determine which submit button was clicked from within <form onsubmit="alert(submitted_button.value);">

This page has multiple Submit buttons, all with the same name so that on the server side (Coldfusion), we can determine the desired action by the value of the formAction variable.

<form name="selectionForm" method="post" onsubmit="alert('button pressed was ' + this.xxxx.value);">
...
<input type="submit" name="formAction" value="Next">
<input type="submit" name="formAction" value="Previous">
<input type="submit" name="formAction" value="Cancel">

I've seen methods that set a hidden field from within a submit button's onclick property, but our submit buttons are pulled in from a shared file, so I don't want to make special cases for this form.

What I'm looking for is some sort of DOM property that can be accessed from the Form's onsubmit handler that will show me the value of the submit button that was pressed. Something along the lines of "document.selectionForm.submit.value".

Thanks!
Russ

matt_wiggins

Since your elements are named the same thing, there is no way to differentiate between them, and the only way to check which one was clicked would be the 'onclick' event handler ... you would have to do something like this, although I don't think it is exactly standards-compliant:

<form name="selectionForm" method="post" onsubmit="alert('button pressed was ' + theElement.value);">

<input type="submit" name="formAction" value="Next" onclick="theElement = this;">
<input type="submit" name="formAction" value="Previous" onclick="theElement = this;">
<input type="submit" name="formAction" value="Cancel" onclick="theElement = this;">

</form>

WoodyRoundUp

you can do this:

<script type="text/javascript">

</script>

<form name="selectionForm" method="post" onsubmit="checkButton()">
...
<input type="submit" name="formAction" value="Next">
<input type="submit" name="formAction" value="Previous">
<input type="submit" name="formAction" value="Cancel">

rlavalle

ASKER

Matt,
Your way was one of the options I came up with, but as I mentioned, I don't want to add code to the shared (among 20 pages) file that contains the submit buttons. I'm trying to find a way to find the value of the clicked button from the onsubmit event handler.

WoodyRoundUp,
I tried dereferencing the value this way, but document.selectionForm.formAction.value is undefined when there are multiple buttons with the same name. Works fine when they have different names.

I'm holding out hope that, even though you can't differentiate the submit buttons by referencing them by name (document.selectionForm.formAction.value), there must be a way to find the value in the form or DOM structure. When the server recieves the form posting, it sees that there's an item called formAction with a value of "Next"... so I'm hoping the information is available from the onsubmit() as well.

Thanks,
Russ

ASKER CERTIFIED SOLUTION

WoodyRoundUp

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tang_tzuchi

<form name="selectionForm" method="post" onsubmit="checkButton()">
...
<input type="submit" name="formAction" value="Next">
<input type="submit" name="formAction" value="Previous">
<input type="submit" name="formAction" value="Cancel">

or you can use the coldfusion code to verify or differentiate it....
i don't really know coldfusion but i can told you in the jsp.
you just need to use the request.getParameter("formAction") in jsp and compare the value to differentiate it....

rlavalle

ASKER

WoodyRoundUp,

Excellent alternative. So you set up event handlers on each submit button that run when clicked before the form gets submitted.

Unfortunately, I'm in the same situation here as I am with the buttons. My piece of the puzzle (page) only includes the <form>... </form> block. So I don't have ready access to the <Body> tag which is also shared across all pages. Actually, I have access, but am reluctant to in principle since I try to avoid writing special case code, especially in such widely shared files.

I'll keep this question open, hoping for an onsubmit() solution, but you'll certainly get some credit.

tang_tzuchi,

checkButton() in your code doesn't show how it would determine which of the formAction buttons was clicked. Also, I'm looking for a client side solution. Server side validation is pretty straight forward since only the information for the clicked submit button will be sent, so the info (value) is readily available.

Thanks,
Russ

WoodyRoundUp

what about putting the script execution at the bottom?

WoodyRoundUp

i mean, at the bottom of the form?
lol...

rlavalle

ASKER

We've thought about that, but worry that there is no guarantee that the form will be completely parsed before the javascript code is run. The <body onload> tag is ideal for this.

Thanks,
Russ

tang_tzuchi

<form name="test" action="" method="post">
<input type="button" name="testbutton" value="submit" onclick="chk('a')">
<input type="button" name="testbutton" value="submit" onclick="chk('b')">
</form>

<script>
function chk(data){
alert(data);
}
</script>

:)

rlavalle

ASKER

That would work in a situation where one didn't mind altering the <input> button tags, but as I've mentioned, these are shared across 20 pages and I don't want to modify them for just one page. I want to find a way to determine the button pressed solely with code in the <form onsubmit> tag.

I'm beginning to think there's no way, but I won't give up yet.

Thanks!
Russ

SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rlavalle

ASKER

Very nice dakyd,

A variation of WoodyRoundUp's solution that installs the Submit button event handlers via an Application onload event handler. :-)

While I was really hoping for a solution where one could inspect an existing structure from within the <form onsubmit()> function, this performs the same function.

I'll split the points up.

Thanks!
Russ

basdecroon

And now the same question but with image type buttons...

How to determine which submit button was clicked from within &lt;form onsubmit=&quot;alert(submitted_button.value);&quot;&gt;

How to determine which submit button was clicked from within <form onsubmit="alert(submitted_button.value);">