risposta-alla-domanda-sullo-sviluppo-web-bd.com

Cancella i campi modulo con jQuery

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

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

Questo cancellerà tutti i campi della pagina, non solo quelli del modulo. Come apparirebbe il mio selettore per la forma in cui risiede il pulsante di reset effettivo?

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

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: Ripristino di un modulo a più stadi con jQuery

O

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

Come jQuery suggerisce :

Per recuperare e modificare proprietà DOM come checked, selected o disabled stato degli elementi del modulo, utilizzare il metodo .prop () .

583
ngen

Qualsiasi motivo non dovrebbe essere usato?

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

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

Qualcosa come dovrebbe funzionare

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

se si utilizzano i selettori e si apportano valori ai valori vuoti, non si ripristina il modulo, ma si rendono vuoti tutti i campi. Il ripristino è di rendere la forma come era prima di qualsiasi azione di modifica da parte dell'utente dopo il caricamento del modulo dal lato server. Se c'è un input con il nome "username" e quel nome utente è stato precompilato dal lato server, la maggior parte delle soluzioni in questa pagina cancellerà quel valore dall'input, non lo ripristinerà al valore di come era prima delle modifiche dell'utente. Se è necessario ripristinare il modulo, utilizzare questo:

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

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

46
Lukas

Semplice ma funziona come un fascino.

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

Se qualcuno sta ancora leggendo questo thread, ecco la soluzione più semplice che non usi jQuery, ma un semplice JavaScript. 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!

27
Tarmo Saluste
$('form[name="myform"]')[0].reset();
20
apen

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


Provato per primo, non cancellerà 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('');
});
15
Matt Ball

Se vuoi svuotare tutte le caselle di input indipendentemente dal suo tipo, allora è un minuto di passaggio 

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

Ho ottenuto il trucco più semplice per ripristinare la forma

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

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

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]. Otterrete il seguente errore se 

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

JQuery fornisce anche un evento che puoi utilizzare

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

Ho provato e funziona.

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

Spero che sia d'aiuto

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

dove editPOIForm è l'attributo id del tuo modulo.

6
Knowledge Serve

Codice verificato e verificato:

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

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

5
DeepCode

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

5
Carlos Alvarez

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

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

3
Mamun Sabuj

Io uso questo:

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

E qui è il mio pulsante:

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

Diciamo che se si desidera cancellare i campi e ad eccezione di accountType, nella casella di riepilogo a tempo medio verrà reimpostato su un valore particolare, ad esempio 'I campi di restituzione devono essere reimpostati su vuoti, ad esempio casella di testo. Questo approccio verrà utilizzato per la compensazione campi particolari come il 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';
     }
 });
3

Usa questo codice dove vuoi chiamare la funzione di reset normale di jQuery

setTimeout("reset_form()",2000);

E scrivi questa funzione Site jQuery su Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>
1
Monzur
@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. OnSuccess dell'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 entrambi questi diritti, allora non sarai in grado di impedirgli di lavorare ...

1
L.W.C. Nirosh

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

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

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>

0
Jekis

Nessuno dei precedenti funziona su un caso semplice quando la pagina include una chiamata al controllo utente Web che implica l'elaborazione della richiesta IHttpHandler (captcha) . Dopo aver inviato il requsrt (per l'elaborazione delle immagini) il codice seguente non cancella i campi sul 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>
0
user2366666

Se voglio cancellare tutti i campi tranne accountType..Usare quanto segue

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

il codice che vedo qui e le domande SO correlate sembrano incomplete.

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

            $(':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 qualsiasi cosa può essere migliorata.

0
Rafael Kitover