單擊表單按鈕后，隱藏按鈕 div 並顯示隱藏的 div

Question

我試圖隱藏按鈕 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>

非常感謝任何建議

Answer 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>

Answer 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>