forms - resetear - recargar un modal

¿Cómo restablecer el cuerpo del formulario en la caja modal de bootstrap?

Question

Estoy buscando una forma de borrar todos los elementos encontrados en un formulario HTML contenido dentro de un modo Bootstrap sin actualizar la página.

Actualmente:

El usuario ingresa los datos y cierra el modal.

Cuando el usuario vuelve a abrir el modal, los datos ingresados ​​previamente aún permanecen .

¿Cómo puedo borrar completamente todos los elementos dentro del formulario durante el evento de cierre del diálogo modal para que cuando el usuario lo vuelva a abrir, siempre obtenga nuevas entradas limpias, etc.?

Answer 1

¡Solo encuentra tu forma y limpia antes de que se abra!

    $modal = $(''#modal'');
    $modal.find(''form'')[0].reset();

Answer 2

En Bootstrap 3 puede restablecer su formulario después de que su ventana modal se haya cerrado de la siguiente manera:

$(''.modal'').on(''hidden.bs.modal'', function(){
    $(this).find(''form'')[0].reset();
});

Answer 3

Esta es una varianza de la necesidad de restablecer el cuerpo al contenido original. No se trata de un formulario, pero creo que podría ser de alguna utilidad. Si el contenido original era una tonelada de html, es muy difícil encadenar el html y almacenarlo en una variable. Javascript no está atento a los saltos de línea que permite VS 2015 / lo que sea. Así que almaceno toneladas originales de html en el modo predeterminado como este en la carga de la página:

var stylesString = $(''#DefaultModal .modal-body'').html();

Lo que me permite reutilizar este contenido cuando se presiona el botón predeterminado original para modal (hay otros botones que muestran otro contenido en el mismo modal).

$("#btnStyles").click(function () {
    //pass the data in the modal body adding html elements
    $(''#DefaultModal .modal-body'').html(stylesString);
 $(''#DefaultModal'').modal(''show'');
})

Si pongo una alerta para la variable styleString, tendría una cadena sin fin de todo el html sin interrupciones, pero lo hará por mí y lo mantendrá fuera del editor VS.

Aquí es cómo se ve en Visual Studio dentro del modal predeterminado. Guardado en la variable de cadena, ya sea automática (.html) o a mano en VS, sería una gran línea:

<div class="modal-body" id="modalbody">


    <div class="whatdays"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">All Styles</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/ballroom.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Ballroom</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/blues.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Blues</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/contra.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Contra</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/countrywestern.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Country</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/english-country.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">English Country</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/israeli.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Israeli</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/lindyhop.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Lindy Hop/Swing</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/miscvariety.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Misch/Variety</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/neo-square.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Neo-Square</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/polka.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Polka</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/salsa.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Salsa</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/scottish.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Scottish</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/square.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Square</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/tango.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Tango</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/waltz.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Waltz</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/wcswing.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">WCS</span></div>
    <div class="whatdays" style="background-image: url(''../../Responsive/zyedeco-gator.jpg'');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Zydeco/Cajun</span></div>

Answer 4

Fui con una versión ligeramente modificada de la respuesta de @shibbir:

// Clear form fields in a designated area of a page
$.clearFormFields = function(area) {
  $(area).find(''input[type="text"],input[type="email"],textarea,select'').val('''');
};

Llamado de esta manera:

$(''#my-modal'').on(''hidden'', function(){
  $.clearFormFields(this)
});

Answer 5

La respuesta de Mark Berry funcionó bien aquí. Acabo de añadir para dividir el código anterior:

$.clearFormFields = function(area) {
  $(area).find(''input[type="text"],input[type="email"],textarea,select'').val('''');
};

a:

$.clearFormFields = function(area) {
                $(area).find(''input#name'').val('''');
                $(area).find(''input#phone'').val("");
                $(area).find(''input#email'').val("");
                $(area).find(''select#topic'').val("");
                $(area).find(''textarea#description'').val("");
            };

Answer 6

La siguiente solución solucionó mi problema y también mantuvo los valores predeterminados

$(''body'').on(''hidden.bs.modal'', ''.modal'', function () { 
  $(this).find(''input[type="text"],input[type="email"],textarea,select'').each(function() { 
    if (this.defaultValue != '''' || this.value != this.defaultValue) {
         this.value = this.defaultValue; 
    } else { this.value = ''''; }
  }); 
}); 

Answer 7

Puedes hacer una función de JavaScript para hacer eso:

$.clearInput = function () {
        $(''form'').find(''input[type=text], input[type=password], input[type=number], input[type=email], textarea'').val('''');
};

y luego puedes llamar a esa función cada vez que tu modal esté oculto:

$(''#Your_Modal'').on(''hidden'', function () {
        $.clearInput();
});

Answer 8

Si usas ajax para cargar el cuerpo modal de tal manera y quieres poder recargar su contenido

<a data-toggle="modal" data-target="#myModal" href="./add">Add</a>
<a data-toggle="modal" data-target="#myModal" href="./edit/id">Modify</a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here -->
        </div>
    </div>
</div>

utilizar

<script>
    $(function() {
        $(''.modal'').on(''hidden.bs.modal'', function(){
            $(this).removeData(''bs.modal'');
        });
    });
</script>

Answer 9

Solo establezca los valores vacíos en los campos de entrada cuando el modo esté oculto.

$(''#Modal_Id'').on(''hidden'', function () {
   $(''#Form_Id'').find(''input[type="text"]'').val('''');
});