Disable/enable submit button | jQuery

By: Rajesh P.S.

End users' tendency to click a submit button multiple times can lead to unintended double submissions. To counter this, a common solution involves disabling the submit button after the initial click.

Taking advantage of jQuery to enable or disable the button offers several benefits, facilitating dynamic control based on user interaction. This is achieved through the utilization of jQuery's prop() and attr() methods, empowering developers to manipulate the button's status effectively. This approach safeguards against inadvertent actions and enhances user experience during form submissions.

jQuery .prop()

Disabling or enabling a form submit button using jQuery involves using the .prop() method to manipulate the disabled property of the button.

Continue Reading...

$('#btn').prop('disabled', true); //disble

$('#btn').prop('disabled', false); //enable

HTML Form

Create an HTML form with a submit button.

<form id="myForm"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <button type="submit" id="submitButton">Submit</button> </form>

jQuery Event Handling

Use jQuery to handle the form submission event and enable/disable the submit button based on conditions.

$(document).ready(function() { $("#myForm").submit(function(event) { event.preventDefault(); // Prevent default form submission var username = $("input[name='username']").val(); var password = $("input[name='password']").val(); // Example: Disable button on form submission $("#submitButton").prop("disabled", true); // Simulate an AJAX call (for demonstration) setTimeout(function() { // Example: Enable button after simulated AJAX call $("#submitButton").prop("disabled", false); console.log("Form submitted:", username, password); }, 2000); // Simulate a 2-second delay }); });

In this example, when the form is submitted, the jQuery code within the submit event handler disables the submit button using $("#submitButton").prop("disabled", true). This is useful to prevent double submissions or user interactions while waiting for processing.

In the simulated AJAX call (using setTimeout for demonstration purposes), the submit button is re-enabled after a 2-second delay. This showcases how you can manipulate the button's disabled property based on different scenarios.

By toggling the disabled property of the submit button, you can control user interactions during form submissions and processing.

Browser View

Full Source | jQuery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Disable/Enable Form Submit Button</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="container mt-5"> <form id="myForm"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <button type="submit" id="submitButton">Submit</button> </form> </div> <script> $(document).ready(function() { $("#myForm").submit(function(event) { event.preventDefault(); // Prevent default form submission var username = $("input[name='username']").val(); var password = $("input[name='password']").val(); // Disable button on form submission $("#submitButton").prop("disabled", true); // Simulate an AJAX call (for demonstration) setTimeout(function() { // Enable button after simulated AJAX call $("#submitButton").prop("disabled", false); console.log("Form submitted:", username, password); }, 2000); // Simulate a 2-second delay }); }); </script> </body> </html>

Remember to adapt the code according to your specific use case and actual AJAX call.

This approach demonstrates how to disable or enable a form submit button using jQuery, providing users with a responsive and controlled interaction experience during form submissions.

Conclusion

Disabling and enabling a submit button using jQuery provides a solution to prevent double submissions caused by users clicking the button repeatedly. By utilizing the prop() or attr() methods, developers can dynamically control the button's state based on user interaction, enhancing user experience and mitigating unintended actions during form submissions. This approach ensures smoother and more reliable form processing.

Next > How to replace innerHTML of a div using jQuery

Related Topics

More Related Topics.....