jQuery - 表单预防默认，然后继续默认

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

现在你可以看到diffrents

秀哟后你触发提交，所以它突然提交，如果你想看到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>