1

Tengo un formulario en bootstrap, lo lleno, guardo cambios, y luego vuelvo a abrir en la misma ventana para ingresar nuevos datos al formulario, pero me aparecen los datos anteriores, es decir, no se limpia si vuelvo a abrir la misma ventana.

Este es mi código:

 <div class="modal fade" id="generaFolio">
                                <div class="modal-dialog">  
                                    <div class="modal-content">
                                        <!-- Header de la ventana-->
                                        <div class="modal-header"> 
                                            <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                                            <h3 class="modal-title"><strong> Introduzca la siguiente información </strong></h3>
                                        </div>

<form role="form" id="folio">
    <div class="form-group" >
        <label for="nombrePropietario">Nombre Propietario:</label>
        <input type="text" class="form-control" id="nombrePropietario" placeholder="Introduzca nombre del propietario">
        <br><br>
        <label for="nombreSolicitante">Nombre del solicitante:</label>
        <input type="text" class="form-control" id="nombreSolicitante" placeholder="Introduzca nombre del solicitante">
        <br><br>
        <label for="fecha" class="col-xs-3">Fecha de solicitud:</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="día" maxlength="2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="Mes" maxlength="10">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="Año" maxlength="4">
        </div>
        <br><br>    <br><br> 
        <label for="hora"  class="col-xs-4">Hora: <p class="text-muted"></p></label>                                                    
        <div class="col-xs-4">
            <div class="input-group" >
                <input type="text" class="form-control" placeholder="hora" maxlength="2">
                <span class="input-group-addon"><strong>:</strong></span>
                <input type="text" class="form-control" placeholder="min" maxlength="2">
            </div>
        </div>
        <br><br><br>                                          
    </div>
    <div class="modal-footer">
        <input type="reset" class="btn btn-default" value="Limpiar"> 
        <button type="button" class="btn btn-default" data-dismiss="modal"> Cerrar </button>
        <button type="button" class="btn btn-default" > Guardar cambios </button>
    </div>
</form>               

2 respuestas 2

3

Agrégale un ID a tu formulario y posteriormente puedes hacerlo con JQUERY, te dejo 2 opciones:

  1. Primera Opción

    $('#miFormulario')[0].reset();

  2. Segunda Opción

    $('#miFormulario').trigger("reset");


Edición por continuidad

Debes asociar el $('#miFormulario').trigger("reset"); al botón: <button>Cerrar</button> de la siguiente forma:

Primero debes agregar la propiedad id="btnCerrar" al botón:

<button id="btnCerrar" type="button" class="btn btn-default" data-dismiss="modal"> Cerrar </button>

Posteriormente hay que agregarle el evento al botón:

$("#btnCerrar").on("click",function(event){ 
     event.prevenDefault(); 
     $('#miFormulario').trigger("reset"); 
});
9
  • oye ¿y no importa que mi formulario tenga class="modal fade" ?porque pongo ese código y no funciona
    – Abraxas
    Commented el 22 jun. 2016 a las 18:29
  • No debería, que error te arroja? Commented el 22 jun. 2016 a las 18:30
  • pues simplemente me sigue haciendo lo mismo, no se limpia el formulario al cerrar la ventana
    – Abraxas
    Commented el 22 jun. 2016 a las 18:32
  • Ok coloca el código que estas usando para llamar el script que yo te he dejado. Commented el 22 jun. 2016 a las 18:40
  • <script type="text/javascript"> $('#folio')[0].reset(); </script>
    – Abraxas
    Commented el 22 jun. 2016 a las 18:41
0

Sólo debes llamar el input usando el atributo id con javascript o jquery. Por ejemplo:

<input name="nomPropietario" type="text" class="form-control" id="nombrePropietario" placeholder="Introduzca nombre del propietario" >

Entonces con jquery lo llamas y dejas en blanco como sigue:

$('#nombrePropietario').val("");

Debes hacer eso con cada input de tu formulario cada vez que presiones el boton "Guardar Cambios"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.