我尝试使用SweetAlert2。当我不想通过$ _POST发送一些数据时,它可以工作。但是当我想通过$ _POST发送数据时,sweetalert只在不到一秒的时间内出现,然后是disappers,无论用户选择什么,表单都会被发送。
我如何修改我的代码,当我想要定期进行窗口确认时,当用户点击"删除"时,表单将被发送,另外当他点击时"取消",表格不会发送?
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>
答案 0 :(得分: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
})