jQuery AJAX 重定向

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 提交带有指定 URL 的表单。当我单击#next 时，它会向表单的“操作”中指定的目标 URL 发送常规（不是 AJAX）帖子，执行代码块并将我重定向到另一个页面。

在我点击#btnAdd 之前，这两个按钮都按应有的方式工作。当我在单击#btnAdd 后单击#next 时，表单通过 AJAX 提交到 jQuery 函数中指定的 URL，而不是向服务器发送普通帖子。

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

两个按钮真正应该做什么：

`#btnAdd` - submit form via AJAX

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

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

Answer 1

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

看起来您确实需要覆盖默认的submit 处理程序。因此，不要覆盖它，只需直接在 click 处理程序中为 #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
        }
    );
});

还将您的按钮设为常规（非提交）按钮：

<input type="button" value="Add Ticket" class="btn-style-green" id="btnAdd" />

这样您就不会弄乱表单的默认提交操作。你有一个按钮做一件事，另一个按钮做另一件事。

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