How to disable the login button when sending the form to the user not to make several requests?

Asked

Viewed 146 times

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

html

  • checks if the login/registration was successful, if so, selects the form, and the child element (send button) and assigns DISABLED to it

  • 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.

3 answers

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.

  • 1

    @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.

  • 1

    @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.