Submitting a form to two different locations using JavaScript then validating with jQuery

问题

I have a form called #summaryforms, a user can book now or book later.

Here are my buttons:

<div class="bookingbuttondiv">
   <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" />
   <input type="button" class="button" value="Book Now" onClick="this.form.action='payment.php';this.form.submit()">
   <input type="button" class="button" value="Book Later" onClick="this.form.action='poa.php';this.form.submit()"><br/><br/>
</div>

However whenever I try to use jQuery Validation such as:

$("#summaryforms").validate();

It doesn't work and I get no errors, I suspect it is because it submits before the jQuery is called, is there a way around this while still maintaining the option to submit to two different locations?

回答1:

Remove the inline onClick handlers from your button elements. You're using jQuery which negates any need for inline JavaScript. Secondly, since the jQuery Validate plugin already has the submit event handler built-in, you'll need to place your buttons outside of the <form></form> and capture their click events separately.

I removed the inline onclick handlers and added id attributes. I also self-closed your input tags with a />.

HTML:

<form id="summaryforms">
    ...
</form>

<div class="bookingbuttondiv">
   <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" />
   <input type="button" class="button" value="Book Now" id="now" />
   <input type="button" class="button" value="Book Later" id="later" />
</div>

jQuery:

$(document).ready(function() {

    $('.button').each(function () {
        $(this).on('click', function () {
            var action;
            if ($(this).attr('id') == "now") {
                action = 'payment.php';
            } else {
                action = 'poa.php';
            }
            $('#summaryforms').attr('action', action).submit();
        });
    });

    $('#summaryforms').validate({ // initialize the plugin
        // any options and/or rules
    });

});

DEMO: http://jsfiddle.net/a9zAh/

EDIT:

Quote OP:

"... I suspect it is because it submits before the jQuery is called ..."

It should not. Calling a submit() should only trigger the validation since the plugin has a submit event listener built-in. There may be another problem in your code you have not shown us in your OP. Perhaps there is a problem with how you've defined your rules. Also, your id is summaryforms; why is that plural? id's should be unique and if you have more than one form, or any element, on the page sharing an id="summaryforms", that will cause problems.

Follow my working code and jsFiddle demo above as your model and ask questions if you get stuck.

回答2:

Absolutely. You want to "capture" the normal submit, prevent it from happening, then do your validation.

To stop the form from submitting, make sure it has an ID (which it seems like you do), and use something like this:

// on DOM load...
jQuery(function () { 
    // attach a handler to the SUBMIT of your form
    jQuery('#summaryforms').submit( function () {
       // do validation or whatever, and if it passes, return true
       // to submit
       if (myFormIsValid) {
           return true;
       }
       // otherwise, prevent it from submitting "normally"
       return false;
    });
});

回答3:

Problem is combining both javascript and jQuery. In General, javascript is take precedence than jQuery. If you are doing this, Some browser like IE produce unexpected result. And try as follows,

Edited Script:

In jQuery,

 $(document).ready(function(){

    $("#summaryforms").validate();

   $("#summaryforms input.button").click(function(e){
     var action = '';
     if($(e.target).val() === 'Book Now'){
       action = 'payment.php';
     }else if($(e.target).val() === 'Book Later'){
       action = 'poa.php';
     }
     $("#summaryforms").attr('action', action);
     $("#summaryforms").submit();
   })

  });

In HTML,

<div class="bookingbuttondiv">
   <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" />
   <input name="booknw" type="button" class="button" value="Book Now" >
   <input name="booklater" type="button" class="button" value="Book Later" ><br/><br/>
</div>

来源：https://stackoverflow.com/questions/15227222/submitting-a-form-to-two-different-locations-using-javascript-then-validating-wi

标签

jquery

jquery-validate