提问者:小点点

单击表单按钮后,隐藏按钮div并显示一个隐藏的div


我正在尝试隐藏按钮div和显示一个隐藏的div后,一个表单按钮已经被点击,加上延迟提交/重定向。下面是我想出的办法,但似乎没有100%奏效。

null

$('form').submit(function(e) {
  e.preventDefault();
  $('#checking').show();
  $('.button').hide();

  setTimeout(() => {}, 7000);
  return true;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" placeholder="Enter Name" name="details" />
  <input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
  CHECKING DETAILS... Please wait
</div>

null

任何建议都非常感谢


共2个答案

匿名用户

假设您想显示消息然后提交,请执行以下操作

null

$('form').on("submit", function(e) {
  e.preventDefault();
  $('#checking').show();
  $('.button').hide();

  setTimeout(() => {
    // submit the DOM form
    document.getElementById("myForm").submit(); // or $("#myForm")[0].submit()
  }, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" placeholder="Enter Name" name="details" />
  <input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
  CHECKING DETAILS... Please wait
</div>

匿名用户

在计时器回调中,您需要提交表单,但当您这样做时,sumbit回调将反复运行,调用e.preventDefault(),因此您可以使用变量作为“标志”来检查是否应该取消该事件。

null

let flag = false;

$('form').on("submit", function(e) {
  if(!flag){
    e.preventDefault();
    $('#checking').show();
    $('.button').hide();
    flag = true;
  }
  setTimeout(function(){ 
    $('form').submit();
  }, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://www.example.com" method="Post">
  <input type="text" placeholder="Enter Name" name="details" />
  <input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
  CHECKING DETAILS... Please wait
</div>