成功提交表单后重定向

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

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

你可以做最简单的事情就是添加属性“需要”给你输入elements.Example：

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