Disable button with value after submit

Question

How can I block submit after click? I have form with button submit with value.

<button type="submit" name="submit" value="1" class="btn btn-sm btn-warning" id=""><i class="fa fa-pencil" aria-hidden="true"></I>Save edit</button>

And my JS looks this:

 $(function(){
         $("form").submit(function (e) {
             $(".btn").attr("disabled", true);
             return true;
         });
 });

Button is blocked but form is not submitting, I don't know why?

Does this answer your question? [jquery disable submit button on form submission](https://stackoverflow.com/questions/5445431/jquery-disable-submit-button-on-form-submission) — Ryan Wilson, Mar 03 '21 at 19:39

BOZ · Accepted Answer · 2021-03-03T20:06:54.223

1

$(function(){
         $("form").submit(function (e) {
             $(".btn").attr("disabled", true);
             return true;
         });
 });

Here the line written as return true prevents the form from being sent and leaves it with the true.

This is what should be written.

$(function(){
         $("form").submit(function (e) {
             $(".btn").attr("disabled", true);
         });
 });

Edit

Using AJAX

$(function() {
  $("#myForm").on('submit', function(event) {

    var form = this;

    // Prevent native form submit!
    event.preventDefault();

    // Disable Button
    $(".btn").attr("disabled", true);

    // Submit form with AJAX
    $.ajax({
      url: $(form).attr('action'), // URL where we will send the form   
      data: $(form).serialize(), // Serialize form data automatically, 
      type: 'POST',
      beforeSend: function() {
        alert('The form is sent to: ' + $(form).attr('action') + ' \nForm data: ' + $(form).serialize());
      },
      success: function(response) {
        alert(response); //or whatever 
      },
      error: function() {
        alert('Failed!\nBecause "' + $(form).attr('action') + '" not a valid URL'); //or whatever
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" action="//localhost/some-page.html">
  <input name="txt" value="TXT" />
  <button type="submit" name="submit" value="1" class="btn btn-sm btn-warning" id=""><i class="fa fa-pencil" aria-hidden="true"></I>Save edit</button>
</form>

edited Mar 03 '21 at 20:06

answered Mar 03 '21 at 19:26

BOZ

2,731
11
28

Thank you but this not still not working. When I click submit button page is only refreshing (form is not submitting) – Jack Mar 03 '21 at 19:29
This means that the form has already been submitted. It is probably set to `method="post"`. In this case, it doesn't move parameters to the URL. If you want parameters in the URL, you have to do `method="get"`. – BOZ Mar 03 '21 at 19:32
1

@Jack Remember, `$ ("form").submit(function (e) {`this won't do run an event. It handle the event. So this is not where you submit the form. In this case, if you want to submit a form with JavaScript, like @doug1as' answer AJAX or You must make XHR requests. – BOZ Mar 03 '21 at 19:41
I have method POST and it works when i remove this JS code. I read that problem may be in value of submit. https://stackoverflow.com/questions/17106885/disable-submit-button-only-after-submit – Jack Mar 03 '21 at 19:41
In this case, the answer you are looking for will be this answer https://stackoverflow.com/a/17107180/11151040 in the same issue. Other answers were only concerned with deactivating the button. Not by how to submit the form! I include a complete working example of this at the bottom of my answer. You can test it from there. – BOZ Mar 03 '21 at 19:45
@Jack Have you been able to review the snippet I added recently? – BOZ Mar 03 '21 at 20:09

score 1 · Answer 2 · answered Mar 03 '21 at 19:32

I thing it is work in your case:

$(document).ready(() => {

    $('#yourFormIDhere').on('submit', () => {
        $.ajax({
                  url:"/your_url",
                  method:"POST",
                  beforeSend:function() {
                   $('.btn').attr('disabled', 'disabled');
                  },
        })
    });


});

score 0 · Answer 3 · answered Mar 03 '21 at 19:26

0

Your question is not really clear, I don't really understand what you are trying to do. Do you want the button to be blocked after you click the button and the form to be submitted? If you are trying to make the form submit then remove

return true;

answered Mar 03 '21 at 19:26

user14783385

51
5

I want to block submit button after first click and send data from form. When I click button, page is only refreshing, form is not submitted – Jack Mar 03 '21 at 19:30

Disable button with value after submit

3 Answers3

Edit