formularios - limpiar tabla javascript

Función jQuery/Javascript para borrar todos los campos de un formulario

Question

Esta pregunta ya tiene una respuesta aquí:

• Restablecer un formulario de varias etapas con jQuery 29 respuestas

Estoy buscando una función jQuery que borrará todos los campos de un formulario después de haber enviado el formulario.

No tengo ningún código HTML para mostrar, necesito algo genérico.

¿Puede usted ayudar?

¡Gracias!

Answer 1

¿Algo así como el trabajo?

JQuery Clear Form en el cierre

Answer 2

Algo similar a $("#formId").reset() no borrará los elementos que tengan sus valores predeterminados configurados en algo que no sea "" . Una forma de que esto pueda suceder es una presentación previa del formulario: una vez que se ha enviado un formulario, reset() "restablecería" los valores del formulario a los enviados anteriormente, que probablemente no sea "" .

Una opción para borrar todos los formularios en la página es llamar a una función como la siguiente, ejecutándola simplemente como clearForms() :

function clearForms()
{
    $('':input'').not('':button, :submit, :reset, :hidden, :checkbox, :radio'').val('''');
    $('':checkbox, :radio'').prop(''checked'', false);
}

Si desea restablecer un formulario específico, modifique la función de la siguiente manera y clearForm($("#formId")) como clearForm($("#formId")) :

function clearForm($form)
{
    $form.find('':input'').not('':button, :submit, :reset, :hidden, :checkbox, :radio'').val('''');
    $form.find('':checkbox, :radio'').prop(''checked'', false);
}

Cuando llegué originalmente a esta página, necesitaba una solución que tuviera en cuenta los cambios en los formularios y que aún pudiese borrar todos los elementos de entrada.

Tenga en cuenta que esto no borrará el texto del placeholder .

Answer 3

Establezca el val a ""

function clear_form_elements(ele) {

        $(ele).find('':input'').each(function() {
            switch(this.type) {
                case ''password'':
                case ''select-multiple'':
                case ''select-one'':
                case ''text'':
                case ''textarea'':
                    $(this).val('''');
                    break;
                case ''checkbox'':
                case ''radio'':
                    this.checked = false;
            }
        });

    }

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />  
<input onclick="clear_form_elements(''#example_1'')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements(''#example_2'')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements(''#example_3'')" type="button" value="Clear Section 3" />

También puedes probar algo como esto:

  function clearForm(form) {

    // iterate over all of the inputs for the form

    // element that was passed in

    $('':input'', form).each(function() {

      var type = this.type;

      var tag = this.tagName.toLowerCase(); // normalize case

      // it''s ok to reset the value attr of text inputs,

      // password inputs, and textareas

      if (type == ''text'' || type == ''password'' || tag == ''textarea'')

        this.value = "";

      // checkboxes and radios need to have their checked state cleared

      // but should *not* have their ''value'' changed

      else if (type == ''checkbox'' || type == ''radio'')

        this.checked = false;

      // select elements need to have their ''selectedIndex'' property set to -1

      // (this works for both single and multiple select elements)

      else if (tag == ''select'')

        this.selectedIndex = -1;

    });

  };

Más información here y here

Answer 4

HTML

<form id="contactform"></form>

JavaScript

 var $contactform = $(''#contactform'')
    $($contactform).find("input[type=text] , textarea ").each(function(){
                $(this).val('''');            
    });

Función simple y corta para borrar todos los campos

Answer 5

Para restablecer el formulario (pero no borrar el formulario) solo reset evento de reset :

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

Para borrar un formulario, vea otras respuestas.

Answer 6

Simplemente puede usar el tipo de botón de reset .

<input type="text" />
<input type="reset" />

jsfiddle

Editar: recuerde que, el botón de reset , reinicie el formulario para los valores originales, por lo tanto, si el campo tiene algún valor establecido en el campo <input type="text" value="Name" /> después de reset el campo se reiniciará el valor insertado por el usuario y vuelve con la palabra "nombre" en este ejemplo.

Referencia: http://api.jquery.com/reset-selector/

Answer 7

Yo uso la siguiente solución:

1) Configurar el complemento de validación de Jquery

2) Entonces:

$(''your form''s selector'').resetForm();

Answer 8

la idea del disparador fue inteligente, sin embargo, quería hacerlo de la manera jQuery, así que aquí hay una pequeña función que te permitirá seguir encadenando.

$.fn.resetForm = function() {
    return this.each(function(){
        this.reset();
    });
}

Entonces solo llámalo algo como esto

$(''#divwithformin form'').resetForm();

o

$(''form'').resetForm();

y por supuesto todavía puedes usarlo en la cadena

$(''form.register'').resetForm().find(''input[type="submit"]'').attr(''disabled'',''disabled'')

Answer 9

Nota : esta respuesta es relevante para restablecer los campos del formulario, no para borrar los campos, ver actualización.

Puede utilizar el método de restablecimiento nativo de JavaScript reset() para restablecer todo el formulario a su estado predeterminado .

Ejemplo proporcionado por Ryan :

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

Nota: Es posible que esto no restablezca ciertos campos, como type="hidden" .

ACTUALIZAR

Como lo señaló IlyaDoroshin lo mismo se puede lograr utilizando el trigger() de jQuery trigger() :

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

ACTUALIZAR

Si necesita hacer algo más que restablecer el formulario a su estado predeterminado , debe revisar las respuestas a Restablecer un formulario de múltiples etapas con jQuery .

Answer 10

    <form id="form" method="post" action="action.php">
      <input type="text" class="removeLater" name="name" /> Username<br/>
      <input type="text" class="removeLater" name="pass" /> Password<br/>
      <input type="text" class="removeLater" name="pass2" /> Password again<br/>
    </form>
    <script>
$(function(){
    $("form").submit(function(e){
         //do anything you want
         //& remove values
         $(".removeLater").val('''');
    }

});
</script>

Answer 11

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