Question

我正在使用swealalert2，当提交的表单swealalert2即将到来时，只要按任意按钮（确定按钮）就关闭它，它就会非常快地关闭。但是当我使用没有表单的简单按钮时，它就可以正常工作。

<form [formGroup]="myvehicle">
<label >Vin:</label>
<input type="text" [formControlName]="vin" ><br><br>
<label >Year:</label>
<input type="text" [formControlName]="year" ><br><br>
<label >Brand:</label>
<input type="text" [formControlName]="brand" ><br><br>
<label >Color:</label>
<input type="text" [formControlName]="color" ><br><br>
</form>

const sweatalert = () => {
  return Swal('Good job!','You clicked the button!','success')
}

Answer 1

之所以发生这种情况，是因为单击按钮时正在提交表单。这意味着页面将刷新，并删除生成的警报。您可以使用e.preventDefault()阻止提交。您还需要确保在event回调中传递onclick：

onclick="sweatalert(event)"

请参见以下示例：

function sweatalert(e) {
  e.preventDefault(); // stop default functionality of submission (ie. page refresh and data post)
  swal(
    'Good job!',
    'You clicked the button!',
    'success'
  )
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
  <button type="submit" name="addrecord" class="btn btn-primary" onclick="sweatalert(event)" style="margin-left:100px;">Add Record</button>
</form>

但是，请注意：这将停止提交表单。如果要提交表单，然后在将数据提交给PHP之后显示警告，则应使用AJAX。如果使用jQuery，则可以使用$.post或$.ajax方法将数据发送到PHP，然后使用一个回调函数，如果数据提交成功，该函数将被调用。

Answer 2

Swal返回一个承诺。因此，您需要阻止默认的提交事件，并使用.then()格式submit()的地方：

const sweatalert = (ele, evt) => {
    evt.preventDefault();
    Swal('Good job!','You clicked the button!','success').then((result) => {
                ele.closest('form').submit();  // get the closest form and submit
            });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js"></script>


<form action="" method="post" enctype="multipart/form-data">
    <input
            type="submit"
            name="addrecord"
            class="btn btn-primary"
            onclick="sweatalert(this, event)"  
            style="margin-left:100px;"
            value="Add Record"
            />
</form>

Sweatalert2在表单内无法正常工作

2 个答案: