Question 232338 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Keep disable button by timer after form submit on page refresh

When I submit the form the submit button disable for 10 seconds and then submit the form. But I want first submit the form and then the button disable for 10 second. or if any other way to do this please suggest..

I only want to change the button color or change the button text after the form was submit and this thing need to 10 second to active like color or text change the button after submit the form

function getRemainingTimer(isNew) {
    var now = new Date();
    var timer = 5000;
    var remainingTimer = 0;
    var startTime = localStorage.getItem("startTime");
    if (startTime === null) {
        if (!isNew) return 0;
        localStorage.setItem("startTime", now.getTime());
        remainingTimer = timer;
    } else {
        remainingTimer = timer + parseInt(startTime) - now.getTime();
    }
    return remainingTimer;
}

function up(isNew) {
    var remainingTimer = getRemainingTimer(isNew);
    console.log(remainingTimer);
    if (remainingTimer > 0) {
        $("#upside").attr("disabled", true);
        $("#downside").attr("disabled", true);
        var timeout = setTimeout(function () {
            $("#upside").removeAttr("disabled");
            $("#downside").removeAttr("disabled");
            window.location = "";
            localStorage.removeItem("startTime");
        }, remainingTimer);
    } else {
        localStorage.removeItem("startTime");
    }
}
up(false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="" action="#">
    <button id="upside" onclick="up(true)" type="submit" class="">Up</button>
</form>
Tags:

3

Answers


  1. 0

    Since you are already using javascript to handle the button click, you achieve this, by dynamically submitting the form with the button.

    Give the form an ID, and change type="submit" to type="button" like so:

    <form method="" id="toSubmit" action="#">
    <button id="upside" type="button" onclick="up(true)" class="">Up</button>
</form>

    Then, submit the form dynamically before disabling button:

    function up(isNew) {
    var remainingTimer = getRemainingTimer(isNew);
    console.log(remainingTimer);
    if (remainingTimer > 0) {
        $("#toSubmit").submit()
        $("#upside").attr("disabled", true);
        $("#downside").attr("disabled", true);
        var timeout = setTimeout(function () {
            $("#upside").removeAttr("disabled");
            $("#downside").removeAttr("disabled");
            window.location = "";
            localStorage.removeItem("startTime");
        }, remainingTimer);
    } else {
        localStorage.removeItem("startTime");
    }
}

    Mind that since submitting a form refreshes the page, it’s better to run the .submit() function only after you set all your needed localstorage items.

    Login or Signup to reply.
  2. 0

    To achieve your desired behavior, you can modify the code slightly. Instead of disabling the button for 10 seconds before submitting the form, you can submit the form first and then change the button’s color or text while waiting for 10 seconds. Here’s how you can do it:

    Remove the onclick attribute from the button in the HTML form.

    Add an event listener to the form submission using jQuery.

    In the event listener, prevent the default form submission behavior.

    After preventing the default behavior, change the button’s color or text.

    Use a timeout to wait for 10 seconds, then revert the button’s color or text back to the original state.

    Here’s the updated code:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm" method="" action="#">
    <button id="upside" type="submit" class="">Up</button>
</form>

<script>
$("#myForm").submit(function (event) {
    event.preventDefault(); // Prevent form submission
    
    var $upsideButton = $("#upside");
    var originalText = $upsideButton.text();
    
    // Change button text or color
    $upsideButton.text("Submitting..."); // or use CSS to change color
    
    setTimeout(function () {
        $upsideButton.text(originalText); // Revert button text or color
    }, 10000); // 10 seconds
    
    // Simulate form submission
    // You can perform your form submission logic here
    // For now, I'm just logging a message
    console.log("Form submitted!");
});
</script>

    This code will change the button’s text to "Submitting…" when the form is submitted, wait for 10 seconds, and then revert the button’s text back to the original state. You can customize this further to suit your design and behavior preferences.

    I think I was able to give you the answer you wanted

    Login or Signup to reply.
  3. 0

    can be this way in pure JS

    <!DOCTYPE html>
<html lang="en">
<head>
//...//

<body>

<form id="my-form" method="" action="#">
  <input name="bar" type="text" value="" placeholder="input bar">

  <button name="bt-submit" type="submit">Up</button>
</form>

<script>
    const
      tenSeconds    = 10 * 1000
    , lsNameSubmit  = 'waitForSubmit'
    , myForm        = document.getElementById('my-form')
      ;
    myForm['bt-submit'].disabled = JSON.parse( localStorage.getItem(lsNameSubmit) || 'false' )
      ;
    if (myForm['bt-submit'].disabled)
      {
      setTimeout(() => 
        {
        myForm['bt-submit'].disabled = false;
        localStorage.setItem(lsNameSubmit, 'false');
        }
        , tenSeconds);
      }
    myForm.addEventListener('submit', e =>
      {
      if ( myForm['bt-submit'].disabled ) //  security => any carriage return on inputs element may snap a submit
        { 
        return false; // exit without submit.
        }
      myForm['bt-submit'].disabled = true;
      localStorage.setItem(lsNameSubmit, 'true');

      // submit code stuff...
      //...

      return true;
      });
</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search