成功提交表單後重定向

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