los - Borrar campos de formulario con jQuery

limpiar input text jquery

Question

Quiero borrar todos los campos de entrada y área de texto en un formulario. Funciona de la siguiente manera cuando se usa un botón de entrada con la clase de reset :

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Esto borrará todos los campos de la página, no solo los del formulario. ¿Cómo se vería mi selector solo para la forma en que vive el botón de reinicio real?

Answer 1

$ (''formulario''). submit (function () {

var el = $(this);

$(''<button type="reset" style="display:none; "></button>'')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

Answer 2

¿Alguna razón por la que esto no debería ser usado?

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

Answer 3

¿Por qué no usas document.getElementById("myId").reset(); ? esta es la simple y bonita

Answer 4

¿Por qué se debe hacer con cualquier JavaScript en absoluto?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

Lo intenté primero, no borrará los campos con los valores predeterminados.

Aquí hay una manera de hacerlo con jQuery, entonces:

$(''.reset'').on(''click'', function() {
    $(this).closest(''form'').find(''input[type=text], textarea'').val('''');
});

Answer 5

Añadir botón de reinicio oculto de la siguiente manera

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs(''resetBtn'');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

Answer 6

Código probado y verificado:

  $( document ).ready(function() {
    $(''#messageForm'').submit(function(e){
       e.preventDefault();
    });
    $(''#send'').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript debe estar incluido en $(document).ready y debe estar con su lógica.

Answer 7

Con Javascript, simplemente puede hacerlo con esta sintaxis getElementById("your-form-id").reset();

también puede usar jquery llamando a la función de restablecimiento de esta manera $(''#your-form-id'')[0].reset();

Recuerda no olvidar [0] . Obtendrá el siguiente error si

TypeError: $ (...). Reset no es una función

JQuery también proporciona un evento que puede utilizar

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

Lo intenté y funciona.

Nota: es importante tener en cuenta que estos métodos solo restablecen su formulario a su valor inicial establecido por el servidor en la carga de la página. Esto significa que si su entrada se estableció en el valor ''valor establecido'' antes de realizar un cambio aleatorio, el campo se restablecerá a ese mismo valor después de llamar al método de reinicio.

Espero eso ayude

Answer 8

Digamos que si desea borrar los campos y excepto el Tipo de cuenta, en el cuadro desplegable de tiempo medio se restablecerá a un valor particular, es decir, ''Todos''. Los campos restantes se deben restablecer a vacío, es decir, el cuadro de texto. Este enfoque se usará para borrar campos particulares como nuestro requisito.

 $('':input'').not(''#accountType'').each( function() {

    if(this.type==''text'' || this.type==''textarea''){
             this.value = '''';
       }
    else if(this.type==''radio'' || this.type==''checkbox''){
         this.checked=false;
      }
         else if(this.type==''select-one'' || this.type==''select-multiple''){
              this.value =''All'';
     }
 });

Answer 9

El código que veo aquí y en las preguntas de SO relacionadas parece incompleto.

Restablecer un formulario significa establecer los valores originales a partir del HTML, así que lo junté para un pequeño proyecto que estaba haciendo en base al código anterior:

            $('':input'', this)
                .not('':button, :submit, :reset, :hidden'')
                .each(function(i,e) {
                    $(e).val($(e).attr(''value'') || '''')
                        .prop(''checked'',  false)
                        .prop(''selected'', false)
                })

            $(''option[selected]'', this).prop(''selected'', true)
            $(''input[checked]'',   this).prop(''checked'',  true)
            $(''textarea'',         this).each(function(i,e) { $(e).val($(e).html()) })

Por favor, hágamelo saber si me falta algo o algo se puede mejorar.

Answer 10

El siguiente código borra todo el formulario y sus campos estarán vacíos. Si desea borrar solo un formulario en particular si la página tiene más de un formulario, mencione el ID o la clase del formulario.

$("body").find(''form'').find(''input,  textarea'').val('''');

Answer 11

Esto no manejará casos donde los campos de entrada de formulario tienen valores predeterminados no vacíos.

Algo como deberia funcionar

$(''yourdiv'').find(''form'')[0].reset();

Answer 12

He escrito un plugin jQuery universal:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter(''form, :input'').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is(''form'')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is('':radio, :checkbox'')) {
            input.prop(''checked'', this.defaultChecked);
        } else if (input.is(''select'')) {
            input.find(''option'').each(function () {
                $(this).prop(''selected'', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log(''Cannot reset to default value'');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $(''button'').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest(''form'');
        
        if (inputType === ''form'') {
            form.uReset()
        } else {
            $(''input[type='' + inputType + ''], '' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

Answer 13

La solución más fácil y mejor es
$("#form")[0].reset();

No use aquí -
$(this)[0].reset();

Answer 14

Ninguno de los anteriores funciona en un caso simple cuando la página incluye una llamada al control de usuario web que involucra el procesamiento de solicitudes IHttpHandler (captcha). Después de enviar el requsrt (para el procesamiento de imágenes), el código a continuación no borra los campos del formulario (antes de enviar la solicitud HttpHandler) todo funciona correctamente.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Answer 15

Si alguien todavía está leyendo este hilo, aquí está la solución más simple utilizando no jQuery, sino JavaScript simple. Si sus campos de entrada están dentro de un formulario, hay un simple comando de restablecimiento de JavaScript:

document.getElementById("myform").reset();

Más sobre esto aquí: http://www.w3schools.com/jsref/met_form_reset.asp

¡Aclamaciones!

Answer 16

Si desea vaciar todos los cuadros de entrada independientemente de su tipo, es un minuto paso a paso

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

Answer 17

Si quiero borrar todos los campos excepto accountType ... Use lo siguiente

$q('':input'',''#myform'').not(''#accountType'').val('''').removeAttr(''checked'').removeAttr(''selected'');

Answer 18

Si usa los selectores y hace valores para valores vacíos, no se está restableciendo el formulario, se están vaciando todos los campos. Restablecer es hacer el formulario como estaba antes de cualquier acción de edición del usuario después de la carga del formulario desde el servidor. Si hay una entrada con el nombre "nombre de usuario" y ese nombre de usuario se completó previamente desde el lado del servidor, la mayoría de las soluciones en esta página eliminarán ese valor de la entrada, no lo restablecerán al valor en que estaba antes de los cambios del usuario. Si necesita restablecer el formulario, use esto:

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

Si no necesita restablecer el formulario, pero rellene todas las entradas con algún valor, por ejemplo un valor vacío, puede usar la mayoría de las soluciones de otros comentarios.

Answer 19

Simple pero funciona como un amuleto.

$("#form").trigger(''reset''); //jquery
document.getElementById("myform").reset(); //native JS

Answer 20

Tengo el truco más fácil para restablecer la forma

jQuery("#review-form")[0].reset();

o

$("#review-form").get().reset();

Answer 21

Use este código donde desee llamar a la función de restablecimiento normal por jQuery

setTimeout("reset_form()",2000);

Y escriba esta función en el sitio jQuery en Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById(''form1'');
    fm.reset();
}
</script>

Answer 22

Yo uso esto :

$(".reset").click(function() {
  $(''input[type=text]'').each(function(){
     $(this).val('''');
  });
});

Y aquí está mi botón:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

Answer 23

Para jQuery 1.6+ :

$('':input'',''#myform'')
  .not('':button, :submit, :reset, :hidden'')
  .val('''')
  .prop(''checked'', false)
  .prop(''selected'', false);

Para jQuery <1.6 :

$('':input'',''#myform'')
  .not('':button, :submit, :reset, :hidden'')
  .val('''')
  .removeAttr(''checked'')
  .removeAttr(''selected'');

Por favor, vea este post: Restablecimiento de un formulario de varias etapas con jQuery

O

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

Como suggests jQuery:

Para recuperar y cambiar las propiedades de DOM, como el estado de los elementos de formulario checked , selected o disabled , use el método .prop() .

Answer 24

$(".reset").click(function() {
    $(this).closest(''form'').find("input[type=text], textarea").val("");
});

Answer 25

$(''#editPOIForm'').each(function(){ 
    this.reset();
});

donde editPOIForm es el atributo id de su formulario.

Answer 26

$(''form[name="myform"]'')[0].reset();

Answer 27

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID es la identificación del formulario

2. OnSuccess el OnSuccess de la operación, llamamos a la función de JavaScript con el nombre " ClearInput "

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. Si hace ambas cosas correctamente, no podrá impedir que funcione ...