Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    detect which submit button was clicked

    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!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not use a "Reset" button.

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

    Code:
    <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>
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A form cannot have two submit buttons.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    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">

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    <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>

  • #10
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by glenngv
    Code:
    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!

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #12
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!)

  • #13
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by glenngv
    Code:
    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.
    Last edited by corvenus; 12-18-2003 at 03:14 PM.

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh right - so the multiple submit buttons is for usability, and they all do the same thing. Yeah that makes sense
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •