0

我有一个名为 的表格#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 Validation 时，例如：

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

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

4

3 回答 3

1

从元素中删除内联onClick处理程序。button您正在使用 jQuery，它消除了对内联 JavaScript 的任何需求。其次，由于 jQuery Validate 插件已经内置了submit事件处理程序，因此您需要将按钮放在外部并单独<form></form>捕获它们的click事件。

我删除了内联onclick处理程序并添加了id属性。我还input用/>.

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

});

演示：http: //jsfiddle.net/a9zAh/

编辑：

引用操作：

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

它不应该。调用 asubmit()应该只触发验证，因为插件有一个submit内置的事件监听器。您的代码中可能还有另一个问题，您没有在 OP 中向我们展示。您定义规则的方式可能存在问题。另外，你id是summaryforms；为什么是复数？ id的应该是唯一的，如果您在共享一个的页面上有多个form或任何元素，id="summaryforms"则会导致问题。

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

于 2013-03-05T16:06:36.217 回答
-1

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

要阻止表单提交，请确保它有一个 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;
    });
});
于 2013-03-05T15:17:17.100 回答
-1

问题是结合了 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>
于 2013-03-05T15:39:45.557 回答