Question

我有以下表格（内容因不相关而被删除）：

<form id="ticketinfo" class="form-horizontal" action="<?php echo base_url('customerinfo'); ?>" method="post">
  <fieldset>
    <input type="submit" value="Add Ticket" class="btn-style-green" id="btnAdd" />
    <input type="submit" value="Next >>" class="purchase-your-ticket col-md-3" id="next">
  </fieldset>
</form>

这是我的JavaScript：

    $('#btnAdd').click ( function () {
    $('form#ticketinfo').submit (

        function (event)    
        {
            event.preventDefault(); //Avoid that the event 'submit' continues with its normal execution, so that, we avoid to reload the whole page
            $.post(
                url+"ticketinfo/add", //The variable 'url' must store the base_url() of our application
                $("form#ticketinfo").serialize(), //Serialize all the content of our form to URL format

                function (response) 
                {
                }
            );


    });
});

它的作用：

当我点击#btnAdd时，它会通过带有指定网址的AJAX提交表单。当我点击#next时，它会定期（不是AJAX）发布到表单＆＃34; s＆＃34; action＆＃34;中指定的目标网址。执行一段代码并将我重定向到另一页。

在我点击#btnAdd之后，这两个按钮都按照应有的方式工作。单击#next后，单击#btnAdd表单通过AJAX提交到jQuery函数中指定的URL，而不是正常发布到服务器。

简而言之#next如果我先点击#btnAdd，就会执行#btnAdd的工作。

两个按钮应该做什么：

`#btnAdd` - submit form via AJAX

`#next` - submit form via regular post and redirect user.

我还应该补充一点，我希望在表单提交任何一种方式时触发按钮验证事件，而不是必须编写额外的代码来处理表单验证。

Answer 1

点击#btnAdd后，您需要向表单添加新的submit处理程序。（一个阻止提交事件的默认操作。）从那时起，在该表单上调用的任何提交操作将使用该处理程序。

看起来你真的需要来覆盖默认的submit处理程序。因此，不要覆盖它，而是直接在click的{{1}}处理程序中执行逻辑：

#btnAdd

同时使您的按钮成为常规（非提交）按钮：

$('#btnAdd').click(function() {
    $.post(
        url+"ticketinfo/add", //The variable 'url' must store the base_url() of our application
        $("form#ticketinfo").serialize(), //Serialize all the content of our form to URL format
        function(response)
        {
            // you'll probably want to handle the response somehow here
        }
    );
});

这样你就不会搞乱表单的默认提交操作。你有一个按钮可以做一件事而另一个按钮做另一件事。

Answer 2

不要担心使用submit处理程序，只需使用$.post处理程序。

var form = $('#ticketinfo');

$('#btnAdd').on('click', function(e) {
  // Prevent submit.
  e.preventDefault();
  // Send request.
  $.post(url + 'ticketinfo/add', form.serialize(), function(response) {
    // ... Handle the response.
  });
});

Answer 3

您的javascript正在向表单提交事件添加事件处理程序。因此，无论何时提交表单，都会触发您的ajax提交代码，无论点击哪个按钮提交表单。

快速解决这个问题的方法是在单击“下一步”按钮时使用jquery的off（）函数删除事件处理程序。

例如：

$('#btnNext').click ( function () {
    $('form#ticketinfo').off("submit");
});

然而，

如果你有2个动作：添加和下一个，你可能最好有两个表格。一个用于添加，一个用于进入下一个屏幕。这可以在没有任何javascript解决方法的情况下解决问题。

Answer 4

$('form#ticketinfo').submit (

            function (event)    
            {
              ...
            }
);

这会更改表单的onsubmit事件处理程序。

尝试此操作也可以提交表单。

$('#btnAdd').click ( function () {
    $('form#ticketinfo').submit (function (event)   { 
        //CODE
    });
    $("form#ticketinfo").submit() //submits your form
});

jQuery AJAX重定向

4 个答案: