Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to set fomr action on two submit buttons using Jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 290
    Comment on it

    Hello Readers, if you are developing the html form with two or more submit buttons then in this blog you can learn it. On certains conditions a html form should have multiple submit buttons and  both should redirect user to their individual actions. 

    Now lets consider the example a html form having the two submit buttons ie, Save and Preview which redirect user to save.php and preview.php respectively. By using the Jquery let's start working it out.
    Create html file write the code the html form , it;s code will go like this:-

    <html>
    
    <head>
      <title>Tutorial for multiple submit buttons</title>
      <script type='text/javascript' src="jquery-1.5.2.min.js'></script>
     
    </head>
    <body>
    
    <h2>Here's my html form:</h2>
    
    <form action=''id="form1" method='post' name='testing'>
      <input type='text' name='enter your name' va />
      <input type='submit' name='save' value='save' />
      <input type='submit' name='pre' value='prev' />
    <input type="submit" id="button3" value="Submit3" name="button3" />
    </form>
    
    </body>
    
    </html>

    Now on the above code you have seen the form is coded with it's actions is set null. Here leave it blank and after clicking the submit button it will be set dynamically. Consider the  two submit buttons name save and pre. We will set the action of the form from the jquery and it's code will go like this:-

    // prevent enter key on some elements to prevent to submit the form
    function stopRKey(evt) {
      evt = (evt) ? evt : ((event) ? event : null);
      var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
      var alloved_enter_on_type = ['textarea'];
      if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
        return false;
      }
    }
    
    $(document).ready(function() {
      document.onkeypress = stopRKey;
      // catch the id of submit button and store-it to the form
      $("form").each(function() {
        var that = $(this);
    
        // define context and reference
        /* for each of the submit-inputs - in each of the forms on
    			 the page - assign click and keypress event */
        $("input:submit,button", that).bind("click keypress", function(e) {
          // store the id of the submit-input on it's enclosing form
          that.data("callerid", this.id);
        });
      });
    
      $("#form1").submit(function(e) {
        var origin_id = $(e.target).data("callerid");
        alert(origin_id);
        e.preventDefault();
    
      });
    });

    This code worked fine for me and you can try this. 

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: