-1
Hello, I would like to know how to get the login button disabled when sending the form, so that the user does not keep clicking several times and sending several requests.
From now on I thank.
-1
Hello, I would like to know how to get the login button disabled when sending the form, so that the user does not keep clicking several times and sending several requests.
From now on I thank.
1
I modified the example of the site: Jquery
$( "#target" ).submit(function( event ) {
console.log('desabilita');
$("#botao").prop("disabled", true);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input id="botao" type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
i want the button to be disabled only when the form is successfully sent, while the form is missing something, the button remains enabled.
@marcelovictor the logic of the answer remains the same, just add the lock after sending. However, you have not provided any code, it is difficult to provide an accurate answer with missing information.
@marcelovictor posts his code :)
1
Using the above example, just see if the form is valid
$( "#myform" ).submit(function( event ) {
console.log('desabilita');
if ($("#myform").valid()) {
$("#botao").prop("disabled", true);
}
event.preventDefault();
});
0
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script>
$('#btnSalvar').on('click', function (e) {
var button = $('#btnSalvar');
button.prop('disabled', true);
var valid = $("#MyForm").valid();
console.log(valid);
if (!valid) {
e.preventDefault();
button.prop('disabled', false);
} else {
$('#MyForm').submit();
}
});
</script>
<style>
button:disabled {
background: red;
}
.invalid {
background: red;
color: white;
}
.error {
color: red;
}
</style>
<form id="MyForm" novalidate="novalidate">
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" required="" data-required-message="Name is required." class="valid">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required="" data-required-message="Email is required." data-type-message="You must provide a valid email address." class="valid"><label for="email" generated="true" class="error" style="display: none;">Please enter a valid email address.</label>
</div>
<div>
<button id="btnSalvar">Salvar</button>
</div>
</form>
Browser other questions tagged html
You are not signed in. Login or sign up in order to post.
checks if the login/registration was successful, if so, selects the form, and the child element (send button) and assigns DISABLED to it
– Matheus Lopes Marques
If I understand correctly, just disable the button when it is clicked. I do not know if you are using the
$('form').submit()
or using AJAX, but you can disable when returning from Submit if necessary.– Ricardo Alves