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

Question

I am trying to hide the button div and reveal a hidden div after a form button has been clicked plus delay the submission/redirect. Below is what i have come up with but doesn't seem to work 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>

Any advice is much appreciated

Answer 1

Assuming you want to show the message and then submit, do this

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

In your timer callback, you need to submit the form, but when you do the sumbit callback will run again and again call e.preventDefault() , so you can use a variable as a "flag" to check as to whether you should cancel the event or not.

 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>