javascript - 表单提交成功后重定向

Question

我有一个表单，应该在按下提交按钮后提交数据。根据需要标记几个输入字段后，当按下提交按钮后必填字段中没有输入时，表单总是显示我 - 到目前为止，一切顺利。

我想知道的是，如果提交成功，则会重定向到另一个页面。如果有一些空的必填字段，表单应该会显示给我，而不会将我重定向到另一个页面。

现在我有以下代码:

提交按钮:

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
      </div>
  </div>

我还有以下 js 函数来提交表单并将我重定向到另一个页面:

$('document').ready(function () {
    "use strict";
    $(function () {
        $('#submityes').click(function () {
            $.ajax({
                type: "POST",
                /* url: "process.php", //process to mail
                data: $('form.contact').serialize(), */
                success: function (msg) {
                    window.location.replace("/submit_resolved.php");
                },
                error: function () {
                    alert("error");
                }
            });
        });
    });
});

我现在遇到的问题是，无论所有必填字段是否完整，我总是会被重定向到“submit_resolved.php”页面。

我该如何解决这个问题？我只想在所有必填字段都不为空时被重定向。

Answer 1

您应该绑定(bind)到 submit 事件，而不是 click 事件:

更新以匹配评论

$(function () {

    var submityesClicked;

    //catch the click to buttons
    $('#submityes').click(function () {
        submityesClicked = true;
    });
    $('#submitno').click(function () {
        submityesClicked = false;
    });

    $('#webform').submit(function (e) {
        e.preventDefault();//prevent the default action

        $.ajax({
            type: "POST",
            /*url: "process.php", //process to mail
             data: $('form.contact').serialize(),*/
            success: function (msg) {
                window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
            },
            error: function () {
                alert("error");
            }
        });
    });
});

submit 事件仅在表单有效时触发。

请注意，submit 事件由表单触发，而 click 事件由 input 元素触发。