clean bootstrap form

Question

clean bootstrap form

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a form in bootstrap, I fill it, I save changes, and then I open again in the same window to enter new data to the form, but the previous data appears, that is, it is not cleaned if I open it again window.

This is my code:

 <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>

javascript bootstrap

asked by Abraxas 21.06.2016 в 19:49

source

2 answers

How to put in my table in JSON jQuery a sql pdf? I do not understand ifRoom functionality on Android

score 2 · Answer 1

Add an ID to your form and later you can do it with JQUERY , I leave you 2 options:

First Option

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

Second Option

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

Editing by continuity

You must associate the $('#miFormulario').trigger("reset"); with the button: <button>Cerrar</button> in the following way:

First you must add the id="btnCerrar" property to the button:

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

Then you have to add the event to the button:

$("#btnCerrar").on("click",function(event){ 
     event.prevenDefault(); 
     $('#miFormulario').trigger("reset"); 
});

score 0 · Answer 2

You should only call the input using the id attribute with javascript or jquery. For example:

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

Then with jquery you call it and leave blank as follows:

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

You must do that with each input of your form every time you press the "Save Changes" button