Sweetalert2 没有 return true/false

Question

我正在尝试使用 SweetAlert2。当我不想通过 $_POST 发送一些数据时，它可以工作。但是当我想通过 $_POST 发送数据时，sweetalert 只在不到一秒的时间内出现，然后消失，无论用户选择如何发送表单。

我如何修改我的代码，当我想要一个常规的 window 确认时，当用户点击 "delete" 时，表单将被发送，否则当他点击时"cancel"，表格将不会发送？

if(isset($_POST['submit'])) {  
  echo 'Your form was submitted.';
}

<form action="#" method="post>                
 <label>
   <span>Username</span>
   <input type="text" value="" name="username" />
 </label>
 <input type="submit" name="submit" value="Register!" id="test-1" />    
</label>     
</form>



<script>
 document.querySelector('#test-1').onclick = function(){
  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then(function () {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
      )
  })

     //IF SWAL => DELETE -> send form
     //ELSE IF SWAL => CANCEL -> do nothing 
     //when I put here "return false;", then sweetalert is working, but it doesn't send the form
</script>

感谢新手解答：

<?php if(isset($_POST['send']))
{echo 'Your form was submitted.';} ?>

<form id='myfrm' action="#" method="post">   
 <label>
   <span>Username</span>
   <input type="text" value="" name="username" />
   <input type="hidden" name="send" value="send">
 </label>
</form>
 <button value="Register!" id="test-1"> submit </button>

<script>
document.querySelector("#test-1").onclick = function(){
  swal({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!"
  }).then(function () {
   document.querySelector("#myfrm").submit();    
  })
}      
</script>

Answer 1

您可以在表单上使用处理程序，而不是使用处理程序，那样更好

给表单一个 id 同时将您的 submit 按钮更改为普通按钮，因为我们将根据用户的选择手动提交（或不提交）

<form id='myfrm' action="#" method="post">    <!-- u missed quote here -->            
 <label>
   <span>Username</span>
   <input type="text" value="" name="username" />
 </label>
 <!-- EDIT : removed (not working)
 <input type="button" name="submit" value="Register!" id="test-1" />    
-->
<input type="hidden" name="submit" value="submit"/>
</label>     
</form>
<!-- EDIT : added -->
<button name="submit" value="Register!" id="test-1"> submit </button>



<script>
 document.querySelector('#test-1').onclick = function(){
  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then(function () {

     // swal( 'Ready?!', 'Your form is going to be submitted.' 'success');
     // if you want to show alert that form is going to submit you may un-comment above line
    document.querySelector('#myfrm').submit(); // manully submit 
  })

Sweetalert2 没有 return true/false

Sweetalert2 doesn't return true/false

javascript

jquery

sweetalert

sweetalert2

感谢新手解答：