...

View Full Version : detect which submit button was clicked



corvenus
12-15-2003, 10:00 PM
Hi everyone,

Let's say i have a form that looks like this:

<form name="myForm" action="myPage" onsubmit="return validateForm();">

<input type="text" name="myInput" size="10">
<input type="submit" name="add" value="Add this">
<input type="submit" name="cancel" value="Cancel this">

</form>

What i'm trying to do is for the validateForm() function to either redirect the page if "Cancel this" is clicked, or continue processing if "Add this" was clicked. So the validateForm() would work something like this:

function validateForm()
{
if (cancel button is clicked){
location.href=go some place
}
else{
do some other stuff
}
}

So, how can dynamically detect which submit button was clicked, before submitting the form? (that would fill in the "cancel button is clicked")
I tried with document.myForm.cancel.selected and other variations but it always returns undefined.

Any input will be greatly appreciated. Thanks!

Roy Sinclair
12-15-2003, 10:20 PM
Why not use a "Reset" button.



<form name="myForm" action="myPage" onsubmit="return validateForm();">

<input type="text" name="myInput" size="10">
<input type="submit" name="add" value="Add this">
<input type="reset" name="cancel" value="Cancel this">

</form>


Or a button that's not a submit button:



<form name="myForm" action="myPage" onsubmit="return validateForm();">

<input type="text" name="myInput" size="10">
<input type="submit" name="add" value="Add this">
<input type="button" name="cancel" value="Cancel this" onclick="document.location.href='UrlOfCanceledPageGoesHere';return false;">

</form>

corvenus
12-15-2003, 10:50 PM
Thanks for the quick reply Roy.

As far as i know, a Reset button only clears out the fields on a form, it won't let the page process the unSubmit action, so it won't redirect to another page (please tell me if i'm wrong).

When i first made the form, i was going to use the same approach as your second suggestion (onClick action), but i want the form to be able to work even if users have Javascript turned off. If i use an onClick action, the button won't do anything for users without Javascript. Hence my need to use a second submit button, and a function to try and detect which was selected. Also, my server-side code (ASP-VBscript) uses the submitted button's name to properly redirect in case Javascript is turned off. I was hoping there was a way through the DOM to reach the value or name of the chosen submitted button.

In worst case scenario i can always put the Cancel button in a second form, but that wouldn't be a very elegant solution (and not very practical if the Cancel button is not at the end of the other form).

Any other things i might give a try?

Thanks again for the suggestions!

Roy Sinclair
12-15-2003, 11:22 PM
As a practical matter, having a "Cancel" button that you wish to work even when javascript is disabled would require the use of a second form.

brothercake
12-16-2003, 12:20 AM
A form cannot have two submit buttons.

glenngv
12-16-2003, 02:40 AM
function validateForm(oForm){
if (cancelAction) {
location.href="somepage.htm";
return false;
}
//continue here
}
...
<form name="myForm" action="myPage" onsubmit="return validateForm(this);">
<input type="submit" name="add" value="Add this" onclick="cancelAction=false">
<input type="submit" name="cancel" value="Cancel this" onclick="cancelAction=true">

glenngv
12-16-2003, 02:44 AM
Originally posted by brothercake
A form cannot have two submit buttons.

I've heard of that 6 yrs ago, though I didn't know the reason why.
But not anymore now, I use multiple submit buttons myself and have no problems at all.

brothercake
12-16-2003, 03:31 AM
Really, and it validates? I thought that by its very nature, "submit" is a single form-wide action, with a single handler. What happens with "onsubmit" - does it fire with all of them?

It doesn't make sense to me, semantically, to have a form with more than one submit button; it'd be like a PlayStation controller with two Start buttons.

glenngv
12-16-2003, 03:51 AM
<html>
<head>
<title>Multiple Submit Buttons</title>
<script type="text/javascript">
function validate(f){
if (f.user.value==''){
alert('Username is empty.');
f.user.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" action="javascript:alert('submitted!')" onsubmit="return validate(this)">
<input type="text" name="user" /><br />
<input type="submit" name="submit1" value="Submit1">
<input type="submit" name="submit2" value="Submit2">
</form>
</body>
</html>

corvenus
12-16-2003, 04:19 PM
Originally posted by glenngv


function validateForm(oForm){
if (cancelAction) {
location.href="somepage.htm";
return false;
}
//continue here
}
...
<form name="myForm" action="myPage" onsubmit="return validateForm(this);">
<input type="submit" name="add" value="Add this" onclick="cancelAction=false">
<input type="submit" name="cancel" value="Cancel this" onclick="cancelAction=true">


It worked like a charm! To change a variable's value with a submit button, i have to admit it's the first time i see that. So simple and so effective. For some reason i thought that onClick worked only with <input type="button"> and that it didn't work with <input type="submit">. My tests with onClick and "submit" had all been unsucessful..

Thanks a bunch for the suggestion, i think i'll be using this quite often now!

Roy Sinclair
12-16-2003, 04:24 PM
Originally posted by brothercake
Really, and it validates? I thought that by its very nature, "submit" is a single form-wide action, with a single handler. What happens with "onsubmit" - does it fire with all of them?

It doesn't make sense to me, semantically, to have a form with more than one submit button; it'd be like a PlayStation controller with two Start buttons.

Actually two submit buttons can make a lot of sense, if you've got a very long form it may be easier for the user if you've got a submit (and a reset) button at the top of the form and at the bottom of the form. That way they can find a submit button more easily, in other words it's an "ease of use" thing.

corvenus
12-16-2003, 05:11 PM
Originally posted by brothercake
What happens with "onsubmit" - does it fire with all of them?


No, actually it's the other way around. When you click a <input type="submit"> button, it tells the browser to execute the <form action + onSubmit>, which will usually consist of some validation and then redirect to a processing page. So it's the submit buttons that trigger the onSubmit actions, not the contrary. At this point, unless otherwise specified (as with glenngv's Validate(form) function), the number of submit buttons is irrelevant for the onSubmit action.

In my case (if i take the non-simplified version of my form), i have buttons with the following code (including some ASP-VBscript code):

<% if updateRecord=true then %>
<input type="submit" name="newsFormAction" value="Update">
<% else %>
<input type="submit" name="newsFormAction" value="Add">
<% end if %>
<input type="reset" value="Reset">
<input type="submit" name="newsFormAction" value="Cancel" onclick="cancelAction=true">

You might notice that the 2 <input type="submit"> buttons have the same name, but different values. This is because on the processing page, with VBscript i can easily retrieve the value of "newsFormAction", and then do different things depending if the value is "Add" or "Update". You can probably do the same with PHP as well.

So thanks to this little function, my form now has both Client and Server-side input validation, and all the buttons work with either Javascript turned on or off. And i use the same form whether the user wants to add or update an entry in my database (which all simplify the maintenance and portability of the code tremendously!)

corvenus
12-16-2003, 05:14 PM
Oops my bad! I thought you had written "does it fire all of them", instead of "does it fire with all of them". The proper answer would be yes, if you don't use the function mentionned earlier.

Sorry for the confusion :)

corvenus
12-18-2003, 04:12 PM
Originally posted by glenngv


function validateForm(oForm){
if (cancelAction) {
location.href="somepage.htm";
return false;
}
//continue here
}
...
<form name="myForm" action="myPage" onsubmit="return validateForm(this);">
<input type="submit" name="add" value="Add this" onclick="cancelAction=false">
<input type="submit" name="cancel" value="Cancel this" onclick="cancelAction=true">


After a little thinking, i actually found an even simpler way of doing this, without even a need for a function. With the following:

<input type="submit" name="cancel" value="Cancel" onclick="location.href='newsList.asp';return false;">

If the user clicks, the onClick action redirects the page without trying to submit the form (because of the return false). If Javascript is turned off, the form is submitted and then the server-side code does the job of redirecting.

Your function is still the best way to go if we wanted to do something more complicated than just a redirect though.

brothercake
12-19-2003, 12:42 AM
Oh right - so the multiple submit buttons is for usability, and they all do the same thing. Yeah that makes sense :)

glenngv
12-19-2003, 02:22 AM
Originally posted by brothercake
Oh right - so the multiple submit buttons is for usability, and they all do the same thing. Yeah that makes sense :)

Not necessarily a "usability" thing (as in "ease of use"), but importantly more of a "functionality" thing. You can have multiple submit buttons with different functions like:

<input type="submit" name="btnUpdate" value="Update">
<input type="submit" name="btnDelete" value="Delete">
<input type="submit" name="btnMove" value="Move">

and on the server-side, detect which submit button is clicked and do the appropriate processing.

brothercake
12-20-2003, 09:41 PM
Fair enough, I'll retract my earlier statement then :)

hyefive
07-16-2004, 09:21 PM
Feeling a little dense here, but I'm trying Glenn's solution and am getting a "cancelAction is undefined" error.

What am I missing?!

TIA

Willy Duitt
07-16-2004, 09:54 PM
Hard to say without looking at how you tried to implement the code.
Please post your code.....

.....Willy

hyefive
07-16-2004, 10:21 PM
<script language="javascript">
function validateForm(oForm){
if (cancelAction) {
location.href="somepage.htm";
return false;
}
else{
alert("it's a go!");
return false;
}
}
</script>
...

<form name="register" action="step2c.asp" method="post" onsubmit="return validateForm(this);">
<various input fields here...>
<input type="submit" name="cancel" value="Cancel this" onclick="cancelAction=true">&nbsp;&nbsp;
<input type="submit" name="add" value="Add this" onclick="cancelAction=false">
</form>

Roy Sinclair
07-16-2004, 11:14 PM
You left out a declaration of the variable named "cancelAction" (add var cancelAction = false; right after the <script> tag to fix this). I also see that your form will never submit because whether the user said to cancel it or not you've got the validateForm function returning a value of "false" which will prevent the form from being submitting.

hyefive
07-16-2004, 11:29 PM
Thanks you two, I'll get the hang of this stuff yet...

Yea Roy, that was just for testing. Now that the basics work, I can add the meat and potatoes of my goals for the page.

compusolver
01-08-2012, 10:37 PM
Looks like I'm a few years late, but better late than never???


<form id="form1" name="form1" method="post" action="">
<input type="submit" name="btn" value="Update">
<input type="submit" name="btn" value="Delete">
<input type="submit" name="btn" value="Move">
</form>

You can then test for which button was pressed in your server code..


echo "Submitted" . $_POST['btn'];



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum