单击表单按钮后，隐藏按钮 div 并显示隐藏的 div

Posted 2023-05-09

【中文标题】单击表单按钮后，隐藏按钮 div 并显示隐藏的 div

【英文标题】：After form button is clicked, hide the button div and reveal a hidden div

【发布时间】：2021-06-14 18:43:08

【问题描述】：

我试图隐藏按钮 div 并在单击表单按钮后显示隐藏的 div 并延迟提交/重定向。以下是我想出的，但似乎没有 100% 有效。

$('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>

非常感谢任何建议

【问题讨论】：

setTimeout(() => , 7000); return true; 没用

您在哪个部分遇到了问题？问题暗示前者，但空的setTimeout暗示后者。

【参考方案1】：

假设您要显示消息然后提交，请执行此操作

$('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>

【参考方案2】：

在你的计时器回调中，你需要提交表单，但是当你这样做时，sumbit 回调会一次又一次地调用e.preventDefault()，所以你可以使用一个变量作为“标志”来检查是否您是否应该取消活动。

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>