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

}）;

我现在遇到的问题是我将永远被重定向到＆＃34; submit_resolved.php＆＃34;页面，是否所有必填字段都已完成。

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

Answer 1

您应该绑定到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 2

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

$('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 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

您可以做的最简单的事情是添加＆＃34; required＆＃34;属性为您输入元素。例如：

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

成功提交表单后重定向

5 个答案: