Question

我有一个名为#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验证时，例如：

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

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

Answer 1

从onClick元素中删除内联button处理程序。你正在使用jQuery，它不需要内联JavaScript。其次，由于jQuery Validate插件已经内置了submit事件处理程序，因此您需要将按钮放在<form></form>的之外并捕获它们的{{1事件分开。

我删除了内联click处理程序并添加了onclick属性。我还使用id自我关闭了input代码。

<强> HTML ：

/>

<强>的jQuery ：

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

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

修改：

引用OP ：

“......我怀疑这是因为它在调用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 }); });只应触发验证，因为插件内置了submit()事件侦听器。您的代码中可能存在另一个问题，即您未在OP中向我们展示过。您的规则定义方式可能存在问题。此外，您的submit是id;为什么是复数？ summaryforms应该是唯一的，如果您在共享id的网页上有多个form或任何元素，则会导致问题。

按照我上面的工作代码和jsFiddle演示作为您的模型，如果您遇到问题，请提出问题。

Answer 2

绝对。您想“捕获”正常提交，防止它发生，然后进行验证。

要停止提交表单，请确保它有一个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;
    });
});

Answer 3

问题是结合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>

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

3 个答案: