表单提交成功后重定向

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

在完成时进行重定向。不是成功

$('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");
                },
                complete: function () {
                    window.location.replace("/submit_resolved.php");
                },
                error: function () {
                    alert("error");
                }
            });
        });
    });
});

Answer 2

您应该绑定到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 元素触发的。

Answer 3

我假设您正在验证 process.php 中的表单，所以如果像这样从 process.php 验证失败，您必须返回错误。

header('HTTP/1.1 500 Internal Server Booboo');
header('Content-Type: application/json; charset=UTF-8');
die(json_encode(array('message' => 'ERROR', 'code' => 1337)));

查看此链接：Return errors from PHP run via. AJAX?

希望这对你有帮助。

Answer 4

您可以做的最简单的事情是为您的输入元素添加“必需”属性。示例：

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form> 

这是一个 HTML5 属性，因此不需要 JavaScript。所有主流浏览器都支持它。检查此链接：

http://caniuse.com/#search=required

无论如何，您不应该只依赖前端验证。也在后端检查这些输入。

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
        <form action="">
           Username: <input type="text" id="usrname" required>
          <button type="button" name="submityes" 
           id="submityes" class="btn btn-danger">Submit</button>
       </form> 
  </div>

function isValid(){
  var usrname = $("#usrname").val();
    if(usrname == ""){
      return false;
    }
  return true;
}
$(function () {
    $('#submityes').submit(function () {
    if(isValid() == true){
        $.ajax({
            type: "POST",
           /*url: "process.php", //process to mail
            data: $('form.contact').serialize(),*/
            success: function (msg) {
                alert("success");
                window.location.replace("/submit_resolved.php");
            },
        });
        }else{
        alert("error");
        }
    });
});