使用JavaScript将表单提交到两个不同的位置，然后使用jQuery进行验证

我有一个名为

#summaryforms

的表单，用户可以现在预订或以后预订

这是我的按钮：

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

它不起作用，而且我没有收到任何错误，我怀疑这是因为它在调用jQuery之前提交，有没有办法解决这个问题，同时仍然保持提交到两个不同位置的选项？

当然。您希望“捕获”正常提交，防止其发生，然后执行验证

要阻止表单提交，请确保它有一个ID（看起来是这样的），并使用以下内容：

// 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;
    });
}); 

---

问题在于将javascript和jQuery结合起来。一般来说，javascript优先于jQuery。如果你这样做，像IE这样的浏览器会产生意想不到的结果。并尝试如下：

编辑的脚本：

在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();
   })

  });

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

从
按钮
元素中删除内联
onClick
处理程序。您使用的是jQuery，它不需要任何内联JavaScript。其次，由于jqueryvalidate插件已经内置了
submit
事件处理程序，因此您需要将按钮放置在
之外，并分别捕获它们的
单击事件

我删除了内联
onclick
处理程序，并添加了
id
属性。我还使用
/>
自动关闭了您的
输入
标记

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>

$(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
    });

});

演示：


编辑：

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

$(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
    });

});

引用OP：

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

$(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
    });

});

“…我怀疑这是因为它在调用jQuery之前提交…”

不应该。调用
submit（）
只应触发验证，因为插件内置了
submit
事件侦听器。您的代码中可能还有另一个问题，您没有在OP中向我们展示。可能是您如何定义规则的问题。另外，您的
id
是
summaryforms
；为什么是复数
id
应该是唯一的，如果您在共享
id=“summaryforms”
的页面上有多个
表单或任何元素，则会导致问题

按照我上面的工作代码和JSFIDLE演示作为您的模型，如果您遇到问题，可以提问。
我想是因为OP使用的是jQuery，而您仍然有内联的
onClick
处理程序。此外，也不需要在
form.submit（）中使用
submitHandler
。。。这已经是插件的默认行为了。@Sparky我已经编辑了我的帖子。您对内联脚本的期望有点误解。我希望编辑后的文章能给我们一些想法。你们可能需要给我们展示更多的代码。您如何定义插件的规则？另外，您的
id
是
summaryforms
；为什么是复数
id
应该是唯一的，如果页面上有多个带有
id=“summaryforms”
的元素，这将导致问题。
if（myFormIsValid）.
~这有点忽略了验证插件的全部要点。