Cancella i campi modulo con jQuery

Voglio cancellare tutti i campi di input e textarea in un modulo. Funziona come il seguente quando si utilizza un pulsante di input con la resetclasse:

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

Questo cancellerà tutti i campi della pagina, non solo quelli del modulo. Come sarebbe il mio selettore solo per la forma in cui si trova il pulsante di ripristino attuale?

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

Per jQuery 1.6+ :

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

Per jQuery <1.6 :

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

Si prega di consultare questo post: reimpostazione di un modulo in più fasi con jQuery

O

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

Come suggerisce jQuery :

Per recuperare e modificare le proprietà DOM come il checked, selectedo disabledstato degli elementi di modulo, utilizzare il .prop () metodo.

Qualche motivo per cui non dovrebbe essere usato?

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

Questo non gestirà i casi in cui i campi di input del modulo hanno valori predefiniti non vuoti.

Qualcosa del genere dovrebbe funzionare

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

se si utilizzano i selettori e si creano valori per svuotare i valori, questo non reimposta il modulo, ma svuota tutti i campi. Il ripristino consiste nel rendere il modulo come prima di qualsiasi azione di modifica da parte dell'utente dopo il caricamento del modulo dal lato server. Se è presente un input con nome "nome utente" e tale nome utente è stato precompilato dal lato server, la maggior parte delle soluzioni in questa pagina eliminerà quel valore dall'input, non ripristinandolo al valore precedente alle modifiche dell'utente. Se è necessario reimpostare il modulo, utilizzare questo:

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

se non è necessario reimpostare il modulo, ma riempire tutti gli input con un valore, ad esempio un valore vuoto, è possibile utilizzare la maggior parte delle soluzioni da altri commenti.

Semplice ma funziona come un fascino.

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

Se qualcuno sta ancora leggendo questo thread, ecco la soluzione più semplice che utilizza non jQuery, ma JavaScript semplice. Se i campi di input sono all'interno di un modulo, esiste un semplice comando di reimpostazione JavaScript:

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

Maggiori informazioni qui: http://www.w3schools.com/jsref/met_form_reset.asp

Saluti!

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

Perché deve essere fatto con qualsiasi JavaScript?

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

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

L'ho provato prima, non cancella i campi con valori predefiniti.

Ecco un modo per farlo con jQuery, quindi:

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

Se si desidera svuotare tutte le caselle di input indipendentemente dal tipo, è un minuto

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

Ho il trucco più semplice per ripristinare il modulo

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

o

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

Con Javascript puoi semplicemente farlo con questa sintassi getElementById("your-form-id").reset();

puoi anche usare jquery chiamando la funzione reset in questo modo $('#your-form-id')[0].reset();

Ricorda di non dimenticare [0]. Otterrai il seguente errore se

TypeError: $ (...). Reset non è una funzione

JQuery fornisce anche un evento che è possibile utilizzare

$ ( '# Form_id') grilletto ( "reset").;

Ho provato e funziona.

Nota: è importante notare che questi metodi reimpostano il modulo al loro valore iniziale impostato dal server al caricamento della pagina. Ciò significa che se il tuo input è stato impostato sul valore "set value" prima di apportare una modifica casuale, il campo verrà reimpostato sullo stesso valore dopo che è stato chiamato il metodo di reset.

Spero che sia d'aiuto

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

dov'è editPOIForml' idattributo del tuo modulo.

Perché non usi document.getElementById("myId").reset();? questo è semplice e carino

Codice testato e verificato:

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

Javascript deve essere incluso in $(document).readye deve essere con la tua logica.

La soluzione più semplice e migliore è-
$("#form")[0].reset();

Non usare qui -
$(this)[0].reset();

Diciamo se si desidera cancellare i campi e ad eccezione di accountType, nel frattempo la casella a discesa verrà reimpostata su un valore particolare, ad esempio 'All'.I campi rimanenti dovrebbero essere reimpostati su vuoti, ad esempio casella di testo. Questo approccio verrà utilizzato per cancellare campi particolari come nostro 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';
     }
 });

Io lo uso questo:

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

Ed ecco il mio pulsante:

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

Utilizzare questo codice dove si desidera chiamare la funzione di ripristino normale di jQuery

setTimeout("reset_form()",2000);

E scrivi questa funzione sul sito jQuery su Document Ready

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

Alcuni di voi si sono lamentati del fatto che le radio e simili sono state cancellate dallo stato "controllato" predefinito ... Tutto quello che dovete fare è aggiungere i selettori: radio,: checkbox al .not e il problema è risolto.

Se non riesci a far funzionare tutte le altre funzioni di ripristino, questa funzionerà.

• Adattato dalla risposta di 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 è l'identificazione del modulo

2. OnSuccessdell'operazione chiamiamo la funzione JavaScript con il nome " ClearInput"

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

3. se fai entrambe queste cose bene, allora non sarai in grado di impedirle di funzionare ...

Il codice seguente cancella tutto il modulo e i suoi campi saranno vuoti. Se si desidera cancellare solo un modulo particolare se la pagina ha più di un modulo, indicare l'id o la classe del modulo

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

Se desidero cancellare tutti i campi tranne accountType ... Utilizzare quanto segue

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

il codice che vedo qui e sulle relative domande SO sembra incompleto.

Reimpostare un modulo significa impostare i valori originali dall'HTML, quindi l'ho messo insieme per un piccolo progetto che stavo facendo in base al codice sopra:

            $(':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()) })

Per favore fatemi sapere se mi manca qualcosa o qualcosa può essere migliorato.

Nessuna delle opzioni precedenti funziona in un caso semplice quando la pagina include una chiamata al controllo utente Web che prevede l'elaborazione della richiesta IHttpHandler (captcha). Dopo aver inviato requsrt (per l'elaborazione delle immagini) il codice seguente non cancella i campi nel modulo (prima di inviare la richiesta HttpHandler) tutto funziona correttamente.

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

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

Ho scritto un plugin jQuery universale:

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

Aggiungi il pulsante di ripristino nascosto come segue

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

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

var el = $(this);

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

return false;

});