Disable/enable submit button | jQuery
Normally, end users like to press a few times on the submit button to make sure the button is surely clicked, and it will cause the double submission issues. So, the common solution is disables the submit button after user clicked on it. Using jQuery to enable/disable a submit button has many advantages as it will allow you to enable/disable the button based on user interaction. To enable/disable a button with jQuery you need to use prop()/attr() methods.jQuery .prop()
$('#btn').prop('disabled', true); //disble
$('#btn').prop('disabled', false); //enable
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").submit(function (e) {
e.preventDefault();
$("#btn").prop("disabled", true); //disable
return true;
});
});
</script>
</head>
<body>
<form id="myForm" action="#" method="POST">
<input type="submit" id="btn" value="Click me to disable.."></input>
</form>
</body>
</html>
jQuery .attr()
Also, you can use jQuery attr() method to enable/disable a button.
$('#btn').attr('disabled', true); //disble
$('#btn').attr('disabled', false); //enable
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").submit(function (e) {
e.preventDefault();
$("#btn").attr("disabled", true); //disable
return true;
});
});
</script>
</head>
<body>
<form id="myForm" action="#" method="POST">
<input type="submit" id="btn" value="Click me to disable.."></input>
</form>
</body>
</html>
jQuery.attr() Vs. jQuery.prop()
Both attr() and prop() are used to get or set the value of the specified property of an element attribute, but attr() returns the default value (Original state) of a property whereas prop() returns the current value (Current state).- .attr() changes attributes for that HTML tag.
- .prop() changes properties for that HTML tag as per the DOM tree.
Disabling submit button when text field is empty
It's a good practice to disable the submit button when their text field is empty. This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.
$('#myTxt').on('input change', function() {
if($(this).val() != '') {
$('#mySubmit').prop('disabled', false);
} else {
$('#mySubmit').prop('disabled', true);
}
});
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myTxt').on('input change', function() {
if($(this).val() != '') {
$('#mySubmit').prop('disabled', false);
} else {
$('#mySubmit').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<input type="text" id="myTxt" />
<input type="submit" id="mySubmit" disabled="disabled" value="Search"/>
</body>
</html>
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?