时间戳

首页 > 解决方案 > 放置 SweetAlert 后表单不满足

javascript - 放置 SweetAlert 后表单不满足

问题描述

我有一个表单，我想在用户提交后显示一个甜蜜的警报，但它不起作用

<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，我该如何解决这个问题？

标签： javascriptphphtmljquery

解决方案

这种行为的原因是当用户单击提交按钮时，该按钮被添加到要提交的表单数据中，但是当 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>

推荐阅读