Question

我知道这已被多次询问过，但我的代码在查看类似的问题后仍无法正常工作。

表格

 <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库，控制台中没有显示错误。

Answer 1

您应隐藏提交并在点击#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>

Answer 2

试试这个，可能会对你有帮助

$('#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>

Answer 3

现在你可以看到差异

在显示您的触发提交后，如果您想要查看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>

jQuery - 表单阻止默认然后继续默认

3 个答案: