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

【问题标题】：Show div element when button is clicked before the form is submitted在提交表单之前单击按钮时显示 div 元素
【发布时间】：2017-05-18 11:30:48
【问题描述】：

当用户单击提交按钮时，我想在我的页面上显示一个微调器 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 似乎没问题。此外，在重新加载页面之前上传需要几秒钟，所以我有时间在控制台上查看消息并验证没有显示微调器...

【问题讨论】：

很难说，因为您没有提供完整的代码，我看不到“sk-cube-grid”类的元素。您可以做的一个快速调试是在控制台中运行它： $('.sk-cube-grid').show();看看是否能达到预期的效果。另外请记住，您的表单现在会重新加载页面，因此您将立即被重定向，并且可能没有时间查看微调器
删除表单提交中的this.submit()。它不是jquery submit的有效语法
在提交 from 时显示微调器是毫无意义的操作。因为提交表单总是重新加载页面或重定向页面并且微调器没有足够的时间显示。
@prasad ：在阻止默认操作后，表单提交的正确语法是什么？当我删除 this.submit() 时，会显示微调器，但我还需要提交表单。
@IvonaTau $(this).submit() 是正确的表单。但是你在表单内申请没有任何条件提交。它有循环效果，一次又一次地提交表单。如果您之前有任何条件this.submit

标签： javascript jquery html

【解决方案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>

【讨论】：

感谢您的回答，但我的问题似乎出在其他地方，因为表单提交会触发运行几秒钟的附加代码（这就是我需要微调器的原因:)）并且我能够验证它没有出现...
@IvonaTau，我附加了超时功能。 我的隐藏消息将在表单提交后的 3 秒内可见。尝试再次运行 sn-p。
谢谢，添加一个短暂的超时确实有效 - 表单提交时微调器出现并继续显示

【解决方案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% 时重定向。

【讨论】：

【解决方案3】：

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

 $(function() {

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

希望对你有所帮助。

【讨论】：

你能告诉我-1吗？
感谢@Sunny 的回答，但答案并不能解决在上传时显示微调器
投反对票的不是我，因为我什至没有足够的分数来做到这一点:) @Sunny