Skip to main content
1 de 5
Charlie
  • 226
  • 4
  • 21

Form Submit con Ajax no hace lo que debería

Tengo un código en Ajax para añadir nuevos editoriales pero no me funciona como quiero que funcione.

Este sería el código Ajax:

$("#addeditorials").on("submit", function(e){
    e.preventDefault();
    e.stopPropagation();
    toastr.success("Please, wait a moment...", "Creating new Editorial");
    var btn = $(this);
    var form = $(this).closest('form');
    form.validate({
        rules: {
            name: {
                required: true
            }
        }
    });
    if (!form.valid()) {
        return;
    }
    btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
    form.ajaxSubmit({
        type: 'POST',
        url: './index.php?action=editorial-add',
        cache: 'false',
        success: function(response, status, xhr, $form) {
          setTimeout(function() {
              location.reload();
          }, 2000);
            
        }
    });
});

Y este el form con el submit:

<div class="modal fade" id="addEditorialModal" tabindex="-1" role="dialog" aria-labelledby="Add Editorial" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
          <form class="kt-form" role="form" method="post" action="./index.php?action=editorial-add" id="addeditorials">
          <div class="modal-header">
              <h5 class="modal-title w-100 text-center">New Editorial</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              </button>
          </div>
          <div class="modal-body">
              <div class="kt-section kt-section--first">
                    <div class="form-group row">
                        <label for="inputEmail1" class="col-form-label col-lg-4 col-sm-12 text-right">Name:</label>
                        <div class="col-lg-6 col-md-8 col-sm-12">
                        <input type="text" name="nombre"  required class="form-control" id="inputEmail1" placeholder="">
                        </div>
                    </div>
              </div>
              <div class="kt-form__actions">
                  <?php printButtons("addSubmit","","Add editorial") ?>
              </div>
          </div>
          </form>
      </div>
  </div>
</div>

Los problemas serían:

  • Permite enviar varios submit, no funciona el preventDefault();
  • No se añaden las clases al botón de submit para ponerle el spinner y el disabled.
  • Quiero que me generé el Toastr mientras este añadiendo el nuevo editorial pero solo he conseguido ponerle un timer de 2 segundos para la notificación y que luego se actualice.
Charlie
  • 226
  • 4
  • 21