-1

I have the following html form:

<form id="editForm" method="post" action="/food/update" enctype="multipart/form-data">
  <div class="form-group">
    <input type="text" name="title" class="form-control">
  </div>
  <div class="form-group">
    <button id="submitEdit" type="submit" name="submit" value="Änderungen speichern">Submit</button>
  </div>
</form>

The challenge is to disable the button when the user clicks the submit button to prevent a duplicate http request. Look at my js code.

$(document).ready(function(){

  $(document).on("click", "#submitEdit", function () {
    $('form#editForm').submit();
    $('#submitEdit').attr('disabled', true);
    $('#submitEdit').html('Saving...');
  });

});

It works fine on the desktop, but not in web view. In the web view application I click the button, the button text changes to "Saving..." and nothing happens. The form isn't send.

I already cleared cache on my mobile before testing.

Thank you!

Gentlebeer ツ
  • 625
  • 6
  • 8
  • https://stackoverflow.com/questions/19025677/how-to-disable-a-html-button-after-it-has-been-clicked-not-a-submit-button – JmLavoier Jul 24 '20 at 13:07

1 Answers1

1

Just remove this line of code

//$('form#editForm').submit();    


 $(document).ready(function(){
    
      $(document).on("click", "#submitEdit", function () {
        $('#submitEdit').attr('disabled', true);
        $('#submitEdit').html('Saving...');
      });
    
    });
Santosh Shinde
  • 1,206
  • 10
  • 16
  • ah, thank you. added this line of code because I thought the button would be disabled before the form was submitted, so the form will never be submitted. – Gentlebeer ツ Jul 24 '20 at 13:08
  • Described case was exactly the problem. I added a setTimeout with a short intervall, so the website has the chance to send the http request. The button will be disabled after 100 milliseconds. :) – Gentlebeer ツ Jul 24 '20 at 14:34