Borrar campos de formulario con jQuery

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

$(".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?

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

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');

Consulte esta publicación: restablecer un formulario de varias etapas con jQuery

O

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

Como jQuery sugiere :

Para recuperar y cambiar las propiedades DOM, como el checked, selectedo el disabledestado de los elementos de formulario, use el método .prop () .

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

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

Esto no manejará casos en los que los campos de entrada de formulario tengan valores predeterminados no vacíos.

Algo así debería funcionar

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

si usa selectores y hace que los valores estén vacíos, no está restableciendo el formulario, está haciendo que todos los campos estén vacíos. 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 lado del 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 que tenía antes de los cambios del usuario. Si necesita restablecer el formulario, use esto:

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

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

Simple pero funciona como un encanto.

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

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

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

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

¡Salud!

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

¿Por qué debe hacerse con JavaScript?

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

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

Intenté eso primero, no borrará los campos con valores predeterminados.

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

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

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

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

Obtuve el truco más fácil para restablecer el formulario

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

o

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

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

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

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

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

JQuery también proporciona un evento que puede usar

$ ('# 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 configuró en el valor 'valor establecido' antes de realizar un cambio aleatorio, el campo se restablecerá a ese mismo valor después de que se llame al método de restablecimiento.

Espero eso ayude

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

¿Dónde editPOIFormestá el idatributo de su formulario?

¿Por qué no lo usas document.getElementById("myId").reset();? este es el sencillo y bonito

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 $(document).readyy debe estar con su lógica.

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

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

Digamos 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, cuadro de texto. Este enfoque se utilizará 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';
     }
 });

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>

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

setTimeout("reset_form()",2000);

Y escriba esta función fuera del sitio jQuery en Document Ready

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

Algunos de ustedes se quejaron de que las radios y demás están libres del estado "marcado" predeterminado ... Todo lo que tiene que hacer es agregar los selectores: radio,: checkbox al .not y el problema se resuelve.

Si no puede hacer que todas las demás funciones de reinicio funcionen, esta sí lo hará.

• Adaptado de la respuesta de ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@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. OnSuccessde la operación llamamos a la función JavaScript con el nombre " ClearInput"

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

3. si haces ambas cosas bien, entonces no podrás evitar que funcione ...

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 la identificación o clase del formulario

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

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

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

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

Restablecer un formulario significa establecer los valores originales del HTML, por lo que armé esto para un pequeño proyecto que estaba haciendo según el 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()) })

Avíseme si me falta algo o algo que pueda mejorarse.

Ninguno de los anteriores funciona en un caso simple cuando la página incluye una llamada al control del usuario web que involucra el procesamiento de solicitudes IHttpHandler (captcha). Después de enviar la solicitud (para el procesamiento de imágenes), el siguiente código 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>

He escrito un complemento universal de jQuery:

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

Agregue el 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();
}

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

var el = $(this);

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

return false;

});