Mantener datos en Formulario después de enviar

publicado por: Anonymous

estoy enviando un formulario a travez de JQuery con la siguiente funcion

$('#btnEnviarDatosComputadora').click( function(){
    $.ajax({
        url: 'forms/Equipo/registrar.php',
        type: 'post',       
        data: $('form#SubirDatosComputadora').serialize(),
        success: function(data) {
            $('#response').html('<strong>Datos Guardados!</strong>');
        },
        error: function(){
                alert("error");
        }
    });
});

tengo el div

<div id="response"></div>

donde aparecera mi mensaje…

pero al momento de hacer el submit, aparece el mensaje por 1 segundo y se recarga la pagina borrando los datos del formulario.
mi form

<form id="SubirDatosComputadora" name="SubirDatosComputadora" method="post" enctype="multipart/form-data">

mi boton

<input type="submit" class="btn btn-success" name="btnEnviarDatosComputadora" id="btnEnviarDatosComputadora" value="Enviar Datos">

solución

El problema es que al hacer click en el botón, tenés asignado el type="submit", entonces va a hacer submit del formulario por más que le pongas el evento, entonces la solución es usar event.preventDefault() y así evitar que se haga submit y refresque la página.

$('#btnEnviarDatosComputadora').click(function(event){
    // prevengo la propagación del submit
    event.preventDefault();

    $.ajax({
        url: 'forms/Equipo/registrar.php',
        type: 'post',       
        data: $('form#SubirDatosComputadora').serialize(),
        success: function(data) {
            $('#response').html('<strong>Datos Guardados!</strong>');
        },
        error: function(){
                alert("error");
        }
    });
});

Otra posible solución es cambiar el type="submit" del botón por type="button", entonces esto no hace submit del formulario.

<input type="button" class="btn btn-success" name="btnEnviarDatosComputadora" id="btnEnviarDatosComputadora" value="Enviar Datos">
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *