放置 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>