我知道这已被多次询问过,但我的代码在查看类似的问题后仍无法正常工作。
表格
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<input type="file" name="file" id="fileToUpload" required="">
</div>
<input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
<img src="authors/loading.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
</form>
脚本
<script type="text/javascript">
$('#form1').on('submit', function(e) {
e.preventDefault();
$('#submit').hide();
$('#loading').show();
this.submit();
});
</script>
我试图在点击时隐藏提交按钮然后显示加载gif但它直接提交。
所有包含的jQuery库,控制台中没有显示错误。
答案 0 :(得分:3)
您应隐藏提交并在点击#submit
时显示您的加载,而不是在提交表单时显示。并在提交前检查必填字段。 (但是,这也需要手动验证。)
更改此$('#form1').on('submit', function(e) {
到$('#submit').on('click', function(e) {
。
下面的工作代码段显示了如何根据表单的必填字段切换加载文本/提交按钮。
$('#submit').on('click', function(e) {
e.preventDefault();
$('form .error').remove();
if($('#fileToUpload').val()!=""){
console.log("file selected. submit the form now!");
$('#submit').hide();
$('#loading').show();
$('#form1').submit();
} else {
console.log("file not selected. don't submit the form!");
$('form').append("<div class='error'>file not selected</div>");
$('#submit').show();
$('#loading').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<input type="file" name="file" id="fileToUpload" required="">
</div>
<input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
<img src="authors/loading.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
</form>
答案 1 :(得分:0)
$('#form1').submit(function() {
var pass = true;
//some validations
if(pass == false){
return false;
}
$('#submit').hide();
$('#loading').show();
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<input type="file" name="file" id="fileToUpload" required="">
</div>
<input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
<img src="http://tour.century21mcmullen.com/tour/titan/images/houseSpinner.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
</form>
答案 2 :(得分:0)
现在你可以看到差异
在显示您的触发提交后,如果您想要查看gif更改,它会突然提交,您可以对this.submit进行评论并使用setTimeout进行尝试。
$('#form1').on('submit', function(e) {
e.preventDefault();
$('#submit').hide();
$('#loading').show();
setTimeout(function () {
// $(this).submit();
$('#loading').hide();
$('#submit').show();
}, 5000); // in milliseconds
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<input type="file" name="file" id="fileToUpload" >
</div>
<input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
<img src="https://media4.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
</form>