Question

当用户点击提交按钮时，我想在我的页面上显示一个微调器div元素。我的代码中似乎有一个错误，因为我在这里检查了多个答案和建议，类似的问题似乎没有任何效果 - 显示点击控制台消息，页面开始重新加载而不显示div元素。

HTML：

<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
  ...
  <div class="form-group">
    <input type = "submit" id="upload_button" class="btn btn-primary btn-lg" /> 
  </div>
</form>

Jquery的：

$(document).ready(function(){
  $('#upload_form').on('submit', function(e) {
     e.preventDefault();
     $('.sk-cube-grid').show();
     console.log('Upload button was clicked');
     this.submit();
  });
});

我也尝试过没有成功：

$('#upload_button').on('click', function(e) { 
   console.log('Clicked on upload form');
   $('.sk-cube-grid').show();
});

编辑：当我删除this.submit（）;点击后显示微调器，但表单未提交 - 所以CSS似乎没问题。此外，在重新加载页面之前上传需要几秒钟，所以我有时间在控制台上查看消息并确认没有显示微调器......

Answer 1

代码有效。但是，由于呈现了新的页面，该消息很快就会消失。

$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
     e.preventDefault();
     $('.sk-cube-grid').show();
     console.log('Upload button was clicked');
     var form = this;
     setTimeout( function () { 
       form.submit();
     }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
  <p>...</p>
  <div class="form-group">
    <input type = "submit" id="upload_button" class="btn btn-primary btn-lg" /> 
  </div>
</form>
<div class="sk-cube-grid">My hide message</div>

Answer 2

我认为您应该创建一个隐藏的附加提交按钮，并且在显示微调器的时间间隔之后由JavaScript自动按下。代码：

<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML = 
'@keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>

您可以增加setTimeout以适合您的微调器，或者如果您使用百分比，则在100％时重定向。

Answer 3

您需要在确认之前进行检查，如：

 $(function() {

   $('#upload_button').on('click', function(e) { 
   if (confirm("Click OK to continue?")){
       $('form').submit();
    }
   else
   {
     e.preventDefault();
   }});
 });

希望它会对你有所帮助。

在提交表单之前单击按钮时显示div元素

3 个答案: