使用JavaScript将表单提交到两个不同的位置，然后使用jQuery进行验证 [英] Submitting a form to two different locations using JavaScript then validating with 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 Validation时，例如:

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

它不起作用并且没有错误，我怀疑这是因为它在jQuery调用之前就提交了，在保持提交到两个不同位置的选项的同时，是否可以解决此问题?

解决方案

从您的button元素中删除内联onClick处理程序.您正在使用的jQuery消除了对内联JavaScript的任何需求.其次，由于jQuery Validate插件已经内置了submit事件处理程序，因此您需要将按钮放置在的外部之外，并分别捕获其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/

---

编辑:

引用OP :

"...我怀疑是因为它在jQuery被调用之前就提交了..."

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

按照上面的工作代码和jsFiddle演示作为模型，并询问是否遇到问题.

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?

解决方案

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.

这篇关于使用JavaScript将表单提交到两个不同的位置，然后使用jQuery进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！