How to add reset time on click submit button?

Question

Hi all below code working fine, and any one tel me how could i add reset delay time like 3 second?

i have attached original form that i want impediment this function, what i all need to do is whenever someone hit the submit button, button should change value for "please wait.. " and reset in 3 second value of submit.. that all i want.. and do not refresh page

<input type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();"/>

 <form class="sTitan-extra" method="post"> <div class="input-group"> <label for="name">Name</label> <input type="text" name="name" id="sTitan-name" placeholder="Name*" /> </div> <div class="input-group"> <label for="phone">Phone Number</label> <input type="tel" name="phone" id="sTitan-phone" placeholder="Phone Number*" /> </div> <div class="input-group"> <label for="email">Email Address</label> <input type="email" name="email" id="sTitan-email" placeholder="Email Address*" /> </div> <div class="input-group"> <label for="street">Street Address</label> <input type="text" name="street" id="sTitan-street" placeholder="Street Address*" /> </div> <div class="minis"> <div class="input-group"> <label for="state">State</label> <input type="text" name="state" id="sTitan-state" placeholder="State*" /> </div> <div class="input-group"> <label for="zip">Zip</label> <input type="text" name="zip" id="sTitan-zip" placeholder="Zip*" /> </div> </div> <div class="input-group"> <label for="message">Description</label> <textarea name="message" id="sTitan-message" cols="30" rows="10" placeholder="Describe your problem"></textarea> </div> <input type="submit" id="but" value="Submit"> <p class="little-text">* Required fields</p> </form> </div> <div class="response"> <div class="icon"> <img src="<?php echo get_template_directory_uri(); ?>/dist/img/hi5.png" alt=""> </div> <div class="the-content"> <p><strong>Thank you <span class="name"></span>,</strong></p> <p>Your request has been submited succesfully. we will send you a confirmation email shortly:</p> </div> <a href="javascript;;" class="close"></a> </div>

Answer 1

You need button
inline event handling is not recommended
If the form target is somewhere else than the page, you can reset the button text - if not, then no need to reset the text since the page is reloaded

Code you need in your page

You do NOT need jQuery

<!doctype html>
<html>

<head>
  <title>test</title>
  <script>
    window.addEventListener("load", function() {
      document.getElementById("but").addEventListener("click", function(e) {
        // e.preventDefault(); // if it is NOT a button but a submit
        const but = this;
        but.disabled = true;
        but.style.pointerEvents = "none";
        but.value = 'Sending, please wait...';
        // but.form.submit(); // move this outside the timeout to submit immediately     
        setTimeout(function() {
          but.disabled = false;
          but.value = "Submit";
          but.style.pointerEvents = "auto";
        }, 3000);
      })
    })
  </script>
</head>

<body>


  <form action="https://google.com/search" target="_blank">
    <input type="text" name="q" /><input type="button" id="but" value="Submit" />
  </form>
  
</body>
</html>

External Working example

The example below will not actually open a new tab here since _blank is not allowed in a stack snippet.

 document.getElementById("but").addEventListener("click", function(e) { const but = this; but.disabled = true; but.value = 'Sending, please wait...'; but.style.pointerEvents = "none"; setTimeout(function() { document.getElementById("q").select(); but.disabled = false; but.value = "Submit"; but.style.pointerEvents = "auto"; }, 3000); })

 <form action="https://google.com/search" target="_blank"> <input type="text" name="q" id="q" /><input type="submit" id="but" value="Submit" /> </form>

Answer 2

If you want to, after 3 seconds, set disabled to false, you could use setTimeout() with a 3000ms delay:

<input type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';setTimeout(() => { this.disabled=false; this.value = 'submit' },3000);this.form.submit();"/>

How to add reset time on click submit button?

Question

2 answers

solution1
1 ACCPTED 2020-08-20 11:52:20

solution2
0 2020-08-20 11:50:14

How to add reset time on click submit button?

Question

2 answers

solution1 1 ACCPTED 2020-08-20 11:52:20

solution2 0 2020-08-20 11:50:14

solution1
1 ACCPTED 2020-08-20 11:52:20

solution2
0 2020-08-20 11:50:14