Crash submit form in ajax request

Question

Crash submit form in ajax request

Navigation

#1 by (1 votes)

0

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><scriptsrc="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 to have the client click the submit button, lock the submit button of the form and wait for a response from ajax .

javascript ajax

asked by anonymous 15.09.2016 / 18:49

1 answer

Why isset does not work well with $ _POST? [duplicate] Keyboard opens when I call my LoginActivity, how to solve it?

score 1 · Answer 1

Hello, I've 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 performs an ajax post. I added the 'beforeSend' that occurs before the post was given, and inside it I blocked the button and changed the background color, all with jQuery, without needing anything too complicated.

Take a look, check if this code helps, and any questions please 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><ahref="" 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>