我正在处理一个需要在提交表单之前进行确认的项目,为此我正在使用SweetAlert2,但它不会以任何方式工作。我尝试使用来自其他线程的代码但是我有相同的问题,页面加载,当我提交表单时,它没有做任何事情(好吧,它提交信息而没有验证或问题)。它的工作原理就像没有SweetAlert的测试版。
HTML表单是这样的:
´<form class="form-register col-8" method="post" action="insert.php" enctype="multipart/form-data">
<select name="subjects">
<option disabled="disabled">Select</option>
<--!Here I have PHP code to list things from DB -->
</select>
<input id="m" type="text"/>
<select name="tempo">
<option disabled="disabled">Select<option> <!--Regular options list-->
<select>
<input id="c" type="text"/>
<input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
</form>´
我没有SweetAlert的功能脚本:
$(document).ready(function(){
$(".form-register").submit(function(){
if ($("#m").val().length<9){
alertify.warning('Incomplete ID');
return false;
}
if ($("#m").val().length>9){
alertify.warning('Error');
return false;
}
if ($("#c").val().length>200){
alertify.warning('Write less comments please');
return false;
}
else
{
var Con= confirm("Click ok if you are sure");
if(Con == true)
{
return true;
}
{
return false;
}
}
});
});
注意:我正在使用jsdelivr的SweetAlert2 8.X。我试图在一个函数中分离这个脚本并将其包含在else中(即使我退出前两个$函数,也在50%工作):
$(document).ready(function(){
$('.form-register').submit(function (e){
e.preventDefault();
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false,
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "Check plz",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
reverseButtons: true
}).then((result) => {
if (result.value) {
swalWithBootstrapButtons.fire(
'Finished',
'Success',
'success',
), function(submit){
form.submit();
}
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Canceled',
'Do corrections and then retry :)',
'error'
)
}
})
});
});
我试图用一个按钮替换输入中的提交类型,并在脚本的头部替换另一个选择器。我唯一需要的是确认继续在insert.php上插入数据,如果用户取消则返回另一条错误消息,如果可能的话......提前感谢。
更改:
<input type="submit" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
至:
<input type="button" id="btn-ok" value="OK" name="register" class="btn btn-primary accept"/>
然后,在您的JS中,听取“#btn-ok”的点击,然后使用$ form.submit()以编程方式提交表单。见下文:
$(document).ready(function() {
$('form #btn-ok').click(function(e) {
let $form = $(this).closest('form');
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false,
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "Check plz",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
reverseButtons: true
}).then((result) => {
if (result.value) {
swalWithBootstrapButtons.fire(
'Finished',
'Success',
'success',
);
$form.submit();
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Canceled',
'Do corrections and then retry :)',
'error'
);
}
});
});