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.