Lock form query into ajax request

Question

I have the following code:

jQuery('#modal').on('submit', function(e) {
  jQuery('button[type="submit"]').prop('disabled', false);
  jQuery('div[name="loading"]').html("<i class='fa fa-circle-o-notch fa-spin'></i> Processando...");
  e.preventDefault();
  setTimeout(function(){ ajax(); }, 10000);
  jQuery('div[name="loading"]').html("");
  jQuery('button[type="submit"]').prop('disabled', true);
});

function ajax() {
  var data = jQuery('#form').serializeArray();
  jQuery.ajax({
    url: "url",
    type: "POST",
    data: data,
    async: false,
    success: function(returnjson) {
    },
    error: function(returnjson) {
    }
  });
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<span><a href="" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal">Alterar informações pessoais</a></span>
<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Alterar Informações pessoais</h4>
      </div>
      <form class="form-horizontal" id="form" action="#">
        <div class="modal-body">
          <fieldset>
            <div class="form-group">
              <div class="col-md-12">
                <input id="nome" name="nome" placeholder="Nome" required type="text" class="form-control input-md">
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-12">
                <input id="cep" name="cep" placeholder="Cep" required type="text" class="form-control input-md">
              </div>
            </div>
            <div class="col-md-12" name="loading" id="loading"></div>
          </fieldset>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-primary" name="submit" id="submit">Salvar alterações</button>
        </div>
      </form>
    </div>
  </div>
</div>

I need as soon as the customer clicks the send button, lock the button submit of form and await a response from ajax.

Answer 1

Hello, I made some changes to your code. Would you like to lock the button and change other things right? Well I’ve grouped most things in one place, but it can be used separately as well. Once the form is submitted it executes an ajax post. I added the 'beforeSend' that happens before the post is given, and inside it I blocked the button and changed the background color, all this with jQuery, without needing anything too complicated.

Take a look, check if this code helps, and any questions make a comment.

jQuery('#modal form').on('submit', function(event){
  event.preventDefault();
  var form = jQuery(this);
  var btnsubmit = form.find('button[type=submit]');
  var loader = jQuery('#loading');
  
  jQuery.ajax({
    url: "url", 
        type: "POST",
        data: data,
        cache: false,
        beforeSend : function(){
          //Aqui está o que você quer
          // bloqueia o botão submit
          btnsubmit.prop('disabled', true);
          btnsubmit.css({backgroundColor:'#e2e2e2'});
          loader.html("<i class='fa fa-circle-o-notch fa-spin'></i> Processando...");
          btnsubmit.addClass("loading");
        },
        success: function(returnjson){
          // desbloqueia o botão submit
          btnsubmit.prop('disabled', false);
          btnsubmit.css({backgroundColor:'black'});
          loader.html('');
          btnsubmit.removeClass("loading");
          
          setTimeout(function(){}, 3000);
        },
        error: function(returnjson) {
          // desbloqueia o botão submit
          btnsubmit.prop('disabled', false);
          btnsubmit.css({backgroundColor:'black'});
          loader.html('');
          btnsubmit.removeClass("loading");
          
            setTimeout(function(){}, 3000);
        }
  });
  // mantém a certeza de que o form não será submetido
  return false;
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<span><a href="" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal">Alterar informações pessoais</a></span>
<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Alterar Informações pessoais</h4>
      </div>
      <form class="form-horizontal" id="form" action="#">
        <div class="modal-body">
          <fieldset>
            <div class="form-group">
              <div class="col-md-12">
                <input id="nome" name="nome" placeholder="Nome" required type="text" class="form-control input-md">
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-12">
                <input id="cep" name="cep" placeholder="Cep" required type="text" class="form-control input-md">
              </div>
            </div>
          </fieldset>
        </div>
        <div class="modal-footer">
          <div class="col-md-12" name="loading" id="loading"></div>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-primary" name="submit" id="submit">Salvar alterações</button>
        </div>
      </form>
    </div>
  </div>
</div>