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

现在你可以看到差异

显示触发提交后，如果您想查看 gif 更改，您可以对此进行评论.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>