放置 SweetAlert 后，表單未滿足

Question

我有一個表單，我想在用戶提交后顯示一個甜蜜的警報，但它不起作用

<form action="rideHandler.php" method="POST" id="tripinfo">
//input
 <button id="ok"  type ="submit" class="subBtn" name="ok" >Offer my ride</button>
</form>

劇本：

$('#ok').click(function(e) {
    e.preventDefault();
    swal({
  icon: "success",
  
}).then(function() {
    $('#tripinfo').submit();
});

    });

PHP文件：

if (isset($_POST['ok'])) {
//continue to enter database
header("Location: page2.php");
}

我知道問題來自 PHP，因為如果 (isset($_POST['ok'])) 返回 false，我該如何解決這個問題？

Answer 1

由於您阻止了提交按鈕的默認行為，因此當您以編程方式提交表單時，它不會將其名稱發送到服務器（就像它的默認行為一樣）。

修復它的一種方法（通過html ）是將您的輸入之一命名為“ok”。

另一種方法（通過php ）是更改isset以搜索/檢查另一個名稱（不是不發送的“ok”）。

如果您想在提交表單時檢查服務器正在獲取什么：

 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   print_r($_POST);  
 };

Answer 2

這種行為的原因是當用戶單擊提交按鈕時，該按鈕被添加到要提交的表單數據中，但是當 javascript 提交表單時，表單會忽略所有提交按鈕，因為它們都沒有被單擊。

所以要解決這個問題，你需要點擊提交按鈕而不是提交表單，但是因為你已經在監聽提交按鈕上的點擊事件，你需要通過檢查event.isTrusted確定用戶是點擊了它還是通過 javascript 完成的財產：

 $('#ok').click(function(e) { // check if user clicked the button if not, do nothing and exit the function. if (!e.originalEvent.isTrusted) return; e.preventDefault(); swal({ icon: "success", }).then(function() { e.target.click(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert"></script> <form action="rideHandler.php" method="POST" id="tripinfo"> //input <button id="ok" type="submit" class="subBtn" name="ok">Offer my ride</button> </form>