php - 使用 Ajax 提交表单之前的 Sweet Alert 确认
问题描述
在使用 SweetAlert 之前,提交表单工作正常。添加 SweetAlert 后,提交表单无论如何都不起作用,我很困惑我的代码有什么问题。
我的html代码
<div class="form-group">
<a href="javascript:;" class="btn btn-success" id="addInputFile">Modal Input File</a>
</div>
和模态
<form class="form-horizontal" id="submit">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="judul" class="form-control" placeholder="Judul">
</div>
<div class="form-group">
<input type="file" name="file">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btn_upload">Upload</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>
js部分
$(document).ready(function(){
$('#addInputFile').on('click', function(){
$('#myModal').modal('show');
$('#btn_upload').on('click', function(e){
e.preventDefault();
Swal.fire({
title: 'Are you sure?',
text: "The data will input",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Add',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.value) {
$('#submit').unbind('submit').submit();
$('#submit').submit(function(e){
e.preventDefault();
$.ajax({
url:'myfile.php',
type:"post",
data:new FormData(this),
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){
alert("Input Form Success.");
}
});
});
}
})
});
});
});
另外,我正在尝试编辑此行
$('#submit').submit(function(e){
进入这个
$('#submit')[0].submit(function(e){
但是页面,但是页面是刷新的。
解决方案
更新这个
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value='Close'>
<input type="button" class="btn btn-primary" id="btn_upload" value='Submit' />
</div>
$(document).ready(function(){
$('#addInputFile').on('click', function(){
$('#myModal').modal('show');
});
$('#btn_upload').on('click', function(){
Swal.fire({
title: 'Are you sure?',
text: "The data will input",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Add',
cancelButtonText: 'Cancel'
}).then((result) => { alert('resolved');
if (result.value) {alert('submitting');
$.ajax({
url:'myfile.php',
type:"post",
data:new FormData(this),
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){
alert("Input Form Success.");
},
failure:function(d){
alert("Error")
alert(d)
}
});
}
})
});
});
推荐阅读
- android - Android assemble build 搞砸了 GUI
- c# - 响应 cookie 不在 Flurl 客户端的“Cookies”字典中
- javascript - 为什么我不能在控制台日志中添加整数和变量?
- c - c 编译器如何在任何地方都一样工作
- java - 如何验证“空”布尔响应?
- javascript - javascript 查询选择器不会在按钮单击时切换 css 设置
- javascript - 如何检测变量是否包含任何内容
- excel - 根据月份对列进行求和......我该怎么做?
- php - 在 Laravel (PHP) 中使用 JWT (JSON Web Token) 进行身份验证
- ruby-on-rails - 在 rails 的 link_to 中使用带有 url 的 ENV 变量