Estoy intentando enviar un formulario que está dentro de un modal mediante ajax y utilizar las validaciones de html5, pero al hacer esto y dar click en el botón de enviar me redirecciona a la página a dónde envió los datos del formulario.
<div class="modal fade" id="modalNuevo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Agregar Cargo/Cuota</h4>
</div>
<div class="modal-body">
<form action="php/addEdoFinanciero.php" accept-charset="utf-8" method="POST" name="from_addEdoFinanciero" id="from_addEdoFinanciero">
<label>Fecha del Cargo/Cuota:</label>
<input type="text" name="date_add" id="datepicker1" class="form-control" required >
<label>Concepto:</label>
<input type="text" name="concepto_add" id="concepto" class="form-control input-sm" required >
<label>Monto:</label>
<input type="number" name="monto_add" id="monto" class="form-control input-sm" placeholder="100.00" required >
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="new_EdoFinanciero" >Enviar</button>
</div>
</form>
</div>
</div>
</div>
este es el código de javascript
if (from_addEdoFinanciero.checkValidity()){
$(function(){
$("#new_EdoFinanciero").click(function(){
//event.preventDefault();// Aqui evitamos que el formulario haga el submit
var frmData = new FormData($("#from_addEdoFinanciero")[0]);/*elegimos el id del formulario y empieza desde la posicion 0*/
$.ajax({
type: "POST",
url: "php/addEdoFinanciero.php",
data: frmData,
contentType: false,
processData: false,
success:function(r){
if(r==1){
$('#modalNuevo').modal('hide');
$('.modal-backdrop').remove();
$('#tabla').load('componentes/tablaEdoFinanciero.php');//FUNCION PARA CARGAR LA TABLA
alertify.success("Datos Enviados");
}else {
if (r==2) {//si hubo error en los datos
$("#modalErrores").modal("show");
alertify.error("Error en los datos");
} else{
alertify.error("Fallo el servidor");
}
}
}
});//cierra ajax
return false; // Evitar ejecutar el submit del formulario.
});//cierra funcion de click
});//cierra function
}
Mi pregunta es si se puede evitar que me mande a addEdoFinanciero.php, ya intente cambiar por input type="submit" y ocupar el preventDefault pero ocurre lo mismo. Este es el código de javascript que ya me funcionó para hacer lo que quiero, pero ahora después de dar click en enviar del formulario (se envian los datos y se quita el modal), si quiero volver a abrir el modal éste aparece y se quita de inmediato y se queda la pantalla oscura con la clase modal backdrop. ¿Alguna idea de porque?
$(document).ready(function(){
$("#new_EdoFinanciero").click(function(){
if($("#from_addEdoFinanciero")[0].checkValidity()){
//event.preventDefault();// Aqui evitamos que el formulario haga el submit
var frmData = new FormData($("#from_addEdoFinanciero")[0]);/*elegimos el id del formulario y empieza desde la posicion 0*/
$.ajax({
type: "POST",
url: "php/addEdoFinanciero.php",
data: frmData, // Adjuntar los campos del formulario enviado.
contentType: false,
processData: false,
success:function(r){
if(r==1){
$('#modalNuevo').modal('hide');//cerramos el modal de nuevo
//$('body').removeClass('modal-open');
$('.modal-backdrop').remove();//para quitar la sombra del modal
$('#tabla').load('componentes/tablaEdoFinanciero.php');//FUNCION PARA CARGAR LA TABLA
alertify.success("Datos Enviados");
}else {
if (r==2) {//si hubo error en los datos
//$("#modalErrores").modal("show");
alertify.error("Error en los datos");
} else{
alertify.error("Fallo el servidor");
}
}
}
});//cierra ajax
return false; // Evitar ejecutar el submit del formulario.+
}
});//cierra funcion de click
});
<button class="btn btn-primary" id="new_EdoFinanciero" >Enviar</button>
fuera del formulario (osea debajo de</form>
).