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
LVL 2
rlavalleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

matt_wigginsCommented:
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>
WoodyRoundUpCommented:
you can do this:

<script type="text/javascript">
<!--
   function checkButton()
   {
          if (document.selectionForm.formAction.value=="Next")
          {
                document.selectionForm.action="next.php";
          } else if (document.selectionForm.formAction.value=="Previous")
          {
                document.selectionForm.action="previous.php";
          } else if (document.selectionForm.formAction.value=="Cancel")
          {
                document.selectionForm.action="cancel.php";
          }
   }
-->
</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">
rlavalleAuthor Commented:
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
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

WoodyRoundUpCommented:
<html>
<head>
<script type="text/javascript">
function check()
{
      for (var i=0; i<document.test.length; i++)
      {
            if (document.test[i].type=="submit" && document.test[i].name=="testbutton")
            {
                  document.test[i].onclick = function ()
                  {
                        if (this.value=="a")
                              document.test.action = "a.php";
                        else if (this.value=="b")
                              document.test.action = "b.php";

                  }
            }
      }
}
</script>
</head>
<body onload="check()">
<form name="test" action="" method="post">
<input type="submit" name="testbutton" value="a">
<input type="submit" name="testbutton" value="b">
</form>
</body>
</html>

I test this, and it works.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tang_tzuchiGeneral ManagerCommented:
<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....
rlavalleAuthor Commented:
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
WoodyRoundUpCommented:
what about putting the script execution at the bottom?
WoodyRoundUpCommented:
i mean, at the bottom of the form?
lol...
rlavalleAuthor Commented:
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_tzuchiGeneral ManagerCommented:

<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>

:)
rlavalleAuthor Commented:
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
dakydCommented:
If you're looking for a solution that won't modify the html, you can do something like this.  It's similar to Woody's solution, but it's a bit more scalable - you won't have to change the code if you add more submit buttons.  Essentially, you set the onload handler via script so you don't have to modify the <body> tag.  Then you set onclick handlers on the submit buttons, and an onsubmit handler for the form.   Hope that helps.

<html>
<head>
<script type="text/javascript">
window.onload = setActionsForForm;

var submittedValue;
function setActionsForForm()
{
  var theForm = document.forms["test"];
  for (var i = 0, n = theForm.elements.length; i < n; i ++)
  {
    var curr = theForm.elements[i];
    if (curr.type == "submit")
      curr.onclick = setSubmittedValue;
  }
  theForm.onsubmit = function() {alert("submit button used was: " + submittedValue);};
}

function setSubmittedValue()
{
  submittedValue = this.value;
}
</script>
</head>
<body>
<form name="test" action="" method="post">
<input type="submit" name="formAction" value="Next">
<input type="submit" name="formAction" value="Previous">
<input type="submit" name="formAction" value="Cancel">
</form>
</body>
</html>
rlavalleAuthor Commented:
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
basdecroonCommented:
And now the same question but with image type buttons...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.