Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to Submit Button Disable after single click?

How to Submit Button Disable after single click?

File name : index.php

<form action='' id='theform' >
<div class='row'>
<div class="form-group col-md-4">
<label for="name">Name:</label>
<input type='text' name='name' class='form-control'/>
</div>
</div>
<div class='row'>
<div class="form-group col-md-4">
<label for="email">Email:</label>
<input type='text' name='email' class='form-control'/>
</div>
</div>
<div class='row'>
<div class="form-group col-md-4">
<input class='btn btn-primary pull-right' type="submit" value="Submit" id='btnsubmit' />
</div>
</div>
</form>

script file

File name : index.php

<script>
$(function()
{
$('#theform').submit(function(){
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
});

</script>

Example 2 :- How to Submit Button Disable after single click?

File name : index.php

<form action='' id='theform' >
<div class='row'>
<div class="form-group col-md-4">
<label for="name">Name:</label>
<input type='text' name='name' class='form-control'/>
</div>
</div>
<div class='row'>
<div class="form-group col-md-4">
<label for="email">Email:</label>
<input type='text' name='email' class='form-control'/>
</div>
</div>
<div class='row'>
<div class="form-group col-md-4">
<input class='btn btn-primary pull-right' type="button" value="Submit" id='btnsubmit' />
</div>
</div>
</form>

script file

File name : index.php

<script>
$(function()
{
$('#btnsubmit').on('click',function()
{
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#theform').submit();
});

});
</script>

How to Disable Submit Button

To disable a submit button, you have to need add a disabled attribute to the submit button.

$("#btn_Submit").attr("disabled", true);
$("#btn_Submit").text("Wait...");

How to Enable Submit Button

set the disabled attribute to false, or remove the disabled attribute.

$('#btnSubmit').attr("disabled", false);
########## OR ##################
$('#btnSubmit').removeAttr("disabled");

How to Disable Submit Button

<!DOCTYPE html>
<html lang="en">

<body>
<h1>How to disabled submit button after single clicked</h1>

<form id="frm" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="Submit" id="btnTest"></input>

<script>
$(document).ready(function () {

$("#frm").submit(function (e) {

e.preventDefault();

//disable the submit button
$("#btnSubmit").attr("disabled", true);
$("#btnSubmit").text("Wait...");

//disable a normal button
$("#btnTest").attr("disabled", true);
$("#btnTest").text("Wait...");

return true;

});
});
</script>

</body>
</html>

Submit Button Disable :

<script type="text/javascript">
$(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
$("input[type='submit']").attr("disabled", true).val("Please wait...");
return true;
})
})
</script>

Submit Button Disable :

var fewSeconds = 5;
$('#btn').click(function(){
// Ajax request
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
}, fewSeconds*1000);
});

Submit Button Disable :

<script type="text/javascript">
$(document).ready(function(){
$("#frm").validate({
rules : {
nwip_under_consideration_mmm : {
required : true
}
},
messages : {
nwip_under_consideration_mmm :{
required : "Please Enter"
}
},
submitHandler: function (frm) {
//$(".submitBtn").click(function () {
$("#submit").attr("disabled", true);
$("#submit").text("Wait...");
$("#saveasdraft").attr("disabled", true);
$("#saveasdraft").text("Wait...");
//form.submit();
return true;
//});

},
});
});
</script>

Disable/enable submit button using jquery :

Disable/enable submit button | jQuery Normally, users like to press a few times on the submit button to make sure the button is surely clicked, so in that case multiple entries in the table. So, the common solution is disables the submit button after user clicked on it.

To enable/disable a button with jQuery you need to use prop()/attr() methods.

<!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 "></input>
</form>
</body>
</html>

jQuery attr()

<!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 "></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.
In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work. So, it is advised that if you are using a later version of JQuery you should use .prop() whenever possible.

Disabling submit button when text field is empty

<!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>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link