jquery - how to prevent submit form continuously

Question

I have a form in modal as follows:

 <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
             </div>
             <form id="Myform" action="/action_page.php" method="get">
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>
                <input type="button" onclick="submitform()" value="Submit">
             </form>
          </div>
       </div>
    </div>

Javascript

   function submitform() {

        //try
        //event.stopImmediatePropagation();
        //event.stopPropagation();

        //check validate is valid
        if (formValid) {
            $("#Myform").trigger("submit");
        }
    }

$("#Myform").submit(function (e) {
        e.preventDefault();
         // e.stopImmediatePropagation();
        $.ajax({
            type: this.method,
            cache: false,
            url: this.action,
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                    $('#create-media').modal('toggle');

                }
            },
            error: function (error) {
                console.log(error);
            }

        });
    });

Currently, when the user click on the submit button, the data will be sent to the server to process, during the time waiting for the results returned, the modal has not been closed, the user can click to submit more times. I do not want this to happen. I want to prevent users submitting continuously, do not allow users to click on the second submit button, the user must wait for the results returned, if successful, the modal will be closed. I was thinking of disabling the submit button, but that's not safe, because the user can enable that button because of javascript on the user machine. I tried using event.stoppropagation () and event.stopimmediatepropagation () but it did not work. Am I doing something wrong? How do I prevent users from submitting continuously?

Thanks AlL

Answer 1

Follwing CertainPerformance idea, I would suggest you use a variable. However, instead of placing the variable at the beginning of the code, I would suggest to use the beforeSend callback provided by Ajax, it will be called right before sending the request.

var isBusy = false;
$("#Myform").submit(function (e) {
    e.preventDefault();
    if(isBusy) {
        return;
    }
    $.ajax({
        type: this.method,
        cache: false,
        url: this.action,
        enctype: 'multipart/form-data',
        data: new FormData(this),
        processData: false,
        contentType: false,
        beforeSend: function(xhr) {
            isBusy = true;
        },
        success: function (data) {
            $('#create-media').modal('toggle');
            isBusy = false;
        },
        error: function (error) {
            console.log(error);
            isBusy = false;
        }

    });
});

You can learn more about the beforeSend callback here
P.S. You could also use the $.ajax.active variable, which returns the amount of active ajax request, this might be a more elegent method.

Answer 2

Give your submitform function a persistent alreadySubmitted variable. Also, try attaching the button handler from Javascript instead of HTML, and preventDefault:

const submitform = (() => {
  let alreadySubmitted = false;
  return (e) => {
    e.preventDefault();
    if (alreadySubmitted) return;
    alreadySubmitted = true;
    if (formValid) {
      $("#Myform").trigger("submit");
    }
  }
})();

document.querySelector('#Myform input[type="button"]').addEventListener('click', submitForm);