Daugiapakopės formos atkūrimas su jQuery

Turiu formą su standartiniu atstatymo mygtuku, koduotu tokiu būdu:

 <input type="reset" class="button standard" value="Clear" /> 

Problema ta, kad ši forma susijusi su daugiapakopiu rūšiavimu, todėl, jei vartotojas užpildo etapą ir vėliau grąžina, skirtingų laukų „prisiminti“ reikšmės nebus atstatomos, kai spustelėsite mygtuką „Išvalyti“.

Manau, kad jQuery funkcijos prijungimas prie visų laukų kilpos ir jų „rankinio“ išvalymo padarys apgauti. Aš jau naudojau jQuery formą, bet aš tiesiog gaunu greitį, todėl aš nežinau, kaip tai padaryti, išskyrus tai, kad kiekvienas laukas atskirai nurodomas identifikatoriumi, kuris, atrodo, nėra labai veiksmingas.

Tia už bet kokią pagalbą.

338
25 марта '09 в 7:40 2009-03-25 07:40 da5id yra nustatytas kovo 25 '09, 07:40 2009-03-25 07:40
@ 29 atsakymai

Atnaujinta 2012 m. Kovo mėn.

Taigi, praėjus dvejiems metams po to, kai aš iš pradžių atsakiau į šį klausimą, grįšiu, kad jis iš esmės tapo dideliu netvarka. Aš tai jaučiuosi, kai grįšiu prie jo, ir mano atsakymas yra teisingas, nes jis yra populiariausias +.

Užrašui Titi atsakymas yra neteisingas, nes tai nėra pirmasis prašomasis plakatas, todėl teisinga, kad iš naujo nustatyti iš naujo, naudojant savo iš naujo () metodą, tačiau šis klausimas bando išvalyti formą iš išsaugotų reikšmių, kurios liks formoje, jei iš naujo nustatysite taip Todėl reikalingas „rankinis“ nustatymas. Manau, kad dauguma žmonių atvyko į „Google“ paieškos klausimą ir tikrai ieško naujo nustatymo () metodo, tačiau jis neveikia konkrečiu atveju, apie kurį kalbama OP.

Mano atsakymas buvo toks:

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

Tai gali veikti daugeliu atvejų, įskaitant OP, tačiau, kaip nurodyta komentaruose ir kituose atsakymuose, bus išvalyti bet kokių vertės atributų radijo / vėliavos elementai.

Tikslesnis atsakymas (bet ne tobulas):

 function resetForm($form) { $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox') .removeAttr('checked').removeAttr('selected'); } // to call, use: resetForm($('#myform')); // by id, recommended resetForm($('form[name=myName]')); // by name 

Pasirinkčių naudojimas :text :radio ir kt. jie patys yra laikomi bloga praktika su jQuery, nes jie užbaigia *:text vertinimą, todėl jis užimtas daug ilgiau nei reikia. Norėčiau naudoti baltąjį sąrašą ir noriu, kad jis būtų naudojamas mano pirminiame atsakyme. Tačiau, nurodant selektoriaus input dalį, taip pat formos elemento talpyklą, čia turėtų būti geriausias atsakymas.

Šis atsakymas vis tiek gali turėti tam tikrų trūkumų, jei pasirinktų elementų numatytieji žmonės nėra nulinis variantas, tačiau, žinoma, jis yra toks pat bendras, kaip ir, ir jį reikės tvarkyti atsitiktinai pagal duomenų bazę. .

487
25 марта '09 в 7:46 2009-03-25 07:46 atsakymą pateikė Paolo Bergantino kovo 25 d., 07:46, 2009-03-25 07:46

http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

myinput.val('') jei turite tokį įvestį, gali nebūti „iš naujo“ 100%.

border=0
 <input name="percent" value="50"/> 

Pvz., Skambinant myinput.val('') įvestyje, kurios numatytoji vertė yra 50, bus tuščia eilutė, o skambinant myform.reset() bus atkurta pradinė vertė 50.

389
10 июня '09 в 9:25 2009-06-10 09:25 atsakymą pateikė Titi Wangsa bin Damhore birželio 10 d. 09:25 2009-06-10 09:25

Su Paolo priimtu atsakymu yra didelė problema. Apsvarstykite:

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

String .val('') taip pat išvalys visas reikšmes, priskirtas vėliavoms ir radijo mygtukams. Taigi, jei (kaip ir aš) darote kažką panašaus:

 <input type="checkbox" name="list[]" value="one" /> <input type="checkbox" name="list[]" value="two" checked="checked" /> <input type="checkbox" name="list[]" value="three" /> 

Naudojant priimtą atsakymą, jūsų įėjimai konvertuojami į:

 <input type="checkbox" name="list[]" value="" /> <input type="checkbox" name="list[]" value="" /> <input type="checkbox" name="list[]" value="" /> 

Atsiprašome, naudoju šią vertę!

Čia yra modifikuota versija, kuri išsaugo jūsų vėliavą ir radijo vertes:

 // Use a whitelist of fields to minimize unintended side effects. $('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val(''); // De-select any checkboxes, radios and drop-down menus $('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected'); 
48
10 сент. atsakymas, kurį pateikė leepowers 10 rugsėjis 2010-09-10 06:44 '10, 6:44, 2010-09-10 06:44

JQuery įskiepis

Sukūriau jQuery įskiepį, todėl galiu lengvai jį naudoti bet kur:

 jQuery.fn.clear = function() { var $form = $(this); $form.find('input:text, input:password, input:file, textarea').val(''); $form.find('select option:selected').removeAttr('selected'); $form.find('input:checkbox, input:radio').removeAttr('checked'); return this; }; 

Taigi dabar galiu ją naudoti skambinant:

 $('#my-form').clear(); 
14
22 июля '11 в 9:07 2011-07-22 09:07 atsakymą pateikė Francis Lewis, liepos 22 d., 11 val., 09:07 2011-07-22 09:07

document.getElementById („FRM“). Atstatyti ()

14
28 мая '09 в 17:11 2009-05-28 17:11 atsakymas duotas Jquery supreseriui gegužės 28 d., 09:17, 2009-05-28 17:11

Formų valymas yra šiek tiek sudėtingas ir ne toks paprastas, kaip atrodo.

Siūlykite naudoti jQuery formos įskiepį ir naudoti „ ClearForm“ arba „resetForm“ . Jis rūpinasi daugeliu kampinių atvejų.

14
25 марта '09 в 8:03 2009-03-25 08:03 atsakymą pateikė Cherian , kovo 25 d., 08:03, 2009-03-25 08:03

Aš paprastai darau:

 $('#formDiv form').get(0).reset() 

arba

 $('#formId').get(0).reset() 
13
27 апр. Atsakymą pateikė Ricardo Bin 27 Bal. 2010-04-27 23:08 '10, 23:08, 2010-04-27 23:08

Apsvarstykite galimybę naudoti patvirtinimo įskiepį - tai puiku! Perpardavėjo forma yra paprasta:

 var validator = $("#myform").validate(); validator.resetForm(); 
5
06 июля '10 в 10:29 2010-07-06 10:29 atsakymą dmitko davė liepos 6 d. 10 val. 10:29 2010-07-06 10:29

iš esmės nė vienas iš pateiktų sprendimų nepadarys man laimingo. kaip nurodė keli žmonės, jie ištuština formą, o ne perkrauna.

Tačiau yra keletas „JavaScript“ savybių, kurios padeda:

  • defaultValue teksto laukams
  • defaultChecked žymimas >
  • defaultSelected, kad pasirinktumėte parinktis

jie saugo vertę, kurią laukas turėjo, kai puslapis buvo įkeltas.

JQuery įskiepio rašymas yra trivialus: (už nekantrus ... čia yra demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

papildinio kodas

 (function( $ ){ $.fn.resetValue = function() { return this.each(function() { var $this = $(this); var node = this.nodeName.toLowerCase(); var type = $this.attr( "type" ); if( node == "input"  ( type == "text" || type == "password" ) ){ this.value = this.defaultValue; } else if( node == "input"  ( type == "radio" || type == "checkbox" ) ){ this.checked = this.defaultChecked; } else if( node == "input"  ( type == "button" || type == "submit" || type="reset" ) ){ // we really don't care } else if( node == "select" ){ this.selectedIndex = $this.find( "option" ).filter( function(){ return this.defaultSelected == true; } ).index(); } else if( node == "textarea" ){ this.value = this.defaultValue; } // not good... unknown element, guess around else if( this.hasOwnProperty( "defaultValue" ) ){ this.value = this.defaultValue; } else{ // panic! must be some html5 crazyness } }); } } )(jQuery); 

Naudojimas

 // reset a bunch of fields $( "#input1, #input2, #select1" ).resetValue(); // reset a group of radio buttons $( "input[name=myRadioGroup]" ).resetValue(); // reset all fields in a certain container $( "#someContainer :input" ).resetValue(); // reset all fields $( ":input" ).resetValue(); // note that resetting all fields is better with the javascript-builtin command: $( "#myForm" ).get(0).reset(); 

kai kurios pastabos ...

  • Aš neatsižvelgiau į naujus html5 formos elementus, kai kurie gali reikalauti specialaus gydymo, tačiau ta pati mintis turėtų veikti. Elementai
  • turi būti nurodyta tiesiogiai. t.y. $( "#container" ).resetValue() neveiks. visada naudokite $( "#container :input" ) .
  • kaip minėta pirmiau, čia yra demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/
4
14 мая '12 в 23:29 2012-05-14 23:29 atsakymas pateikiamas kritzikratzi gegužės 14 d. 12 val. 23:29 2012-05-14 23:29

Tai padės jums.

 $('form') // match your correct form .find('input[type!=submit], input[type!=reset]') // don't reset submit or reset .val(''); // set their value to blank 

Žinoma, jei turite žymės >.attr({'checked': false});

Paolo atsakymas yra glaustesnis. Mano atsakymas yra aiškesnis, nes nežinojau apie pasirinkimo parinktį :input , ir nemanau, kad tik pašalina patvirtintą atributą.

4
25 марта '09 в 7:48 2009-03-25 07:48 atsakymas pateikiamas alex kovo 25 d., 07:48, 2009-03-25 07:48

Manau, kad tai veikia gerai.

 $(":input").not(":button, :submit, :reset, :hidden").each( function() { this.value = this.defaultValue; }); 
4
13 июня '10 в 1:06 2010-06-13 01:06 atsakymas duotas DampeS8N birželio 13 d., 10:06 2010-06-13 01:06

Aš padariau nedidelį pakeitimą malonus sprendimas Francis Lewis . Koks jo sprendimas nėra, yra tas, kad išskleidžiamajame sąraše pasirinktas tuščias. (Manau, kad kai dauguma žmonių nori išvalyti, jie tikriausiai nori, kad visos vertės būtų tuščios.) Tai daroma su .find('select').prop("selectedIndex", -1) .

 $.fn.clear = function() { $(this).find('input') .filter(':text, :password, :file').val('') .end() .filter(':checkbox, :radio') .removeAttr('checked') .end() .end() .find('textarea').val('') .end() .find('select').prop("selectedIndex", -1) .find('option:selected').removeAttr('selected') ; return this; }; 
4
30 июня '14 в 20:51 2014-06-30 20:51 atsakymą pateikė Lukas birželio 30 d. 14 val. 20:51 2014-06-30 20:51

Gali būti, kad iš tiesų lengviau išspręsti be „jQuery“.

Reguliariai javascript yra toks paprastas kaip:

 document.getElementById('frmitem').reset(); 

Aš visada stengiuosi prisiminti, kad nors mes naudojame jQuery, kad pagerintume ir pagreitintume savo kodavimą, kartais tai vyksta ne greičiau. Tokiais atvejais dažnai geriau naudoti kitą metodą.

4
08 июля '11 в 0:50 2011-07-08 00:50 atsakymą davė Ken Le , liepos 8 d. 11 d. 0:50 2011-07-08 00:50

Labiausiai balsavusio atsakymo dėl $(document).ready() :

 $('button[type="reset"]').click(function(e) { $form = $(this.form); $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); e.preventDefault(); }); 
2
15 сент. atsakymas pateikiamas Slawa rugsėjo 15 d 2012-09-15 03:19 '12 at 3:19 2012-09-15 03:19

Tiesiog naudokite „ jQuery Trigger event :

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

Tai bus vėliavos, radijo mygtukai, teksto laukai ir tt ... Iš tiesų tai paverčia jūsų formą į numatytąją būseną. Tiesiog įdėkite #ID, Class, element jQuery selektoriuje.

2
20 июня '15 в 7:47 2015-06-20 07:47 atsakymą pateikė James111 birželio 15 d. 15 val. 07:47 2015-06-20 07:47

Paprastai į formą įtraukiu paslėptą atstatymo mygtuką. jei reikia: $ ('# reset') spustelėkite ().

2
10 окт. Atsakyti Alberto Nunes 10 okt. 2011-10-10 19:27 '11, 19:27, 2011-10-10 19:27

Aš naudoju Paolo Bergantino sprendimą, kuris yra puikus, bet su nedideliu nustatymų skaičiumi ... Visų pirma, norėdami dirbti su formos pavadinimu vietoj ID.

Pavyzdžiui:

 function jqResetForm(form){ $(':input','form[name='+form+']') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); } 

Dabar, kai noriu jį naudoti, būtų

 <span class="button" onclick="jqResetForm('formName')">Reset</span> 

Kaip matote, šis darbas atliekamas bet kokia forma, ir kadangi naudoju css stilių mygtukui sukurti, puslapis nebus atnaujintas paspaudus. Dar kartą dėkojame Paolo už jūsų indėlį. Vienintelė problema yra, jei formoje yra numatytosios vertės.

1
13 окт. Atsakymas pateikiamas raphie spalis 13. 2011-10-13 19:06 '11, 19:06, 2011-10-13 19:06

Jis dirbo man, pirotex atsakymas neatnaujino laukų, jį paėmė, čia „mano redagavimas“:

 // Use a whitelist of fields to minimize unintended side effects. $(':text, :password, :file', '#myFormId').val(''); // De-select any checkboxes, radios and drop-down menus $(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected'); //this is for selecting the first entry of the select $('select option:first', '#myFormId').attr('selected',true); 
1
16 февр. atsakymą, pateiktą kertal , vasario 16 d. 2011-02-16 01:43 '11 prie 1:43 2011-02-16 01:43

Aš naudoju toliau pateiktą sprendimą ir jis dirbo man (maišant tradicinį „JavaScript“ su „jQuery“)

 $("#myformId").submit(function() { comand="window.document."+$(this).attr('name')+".reset()"; setTimeout("eval(comando)",4000); }) 
1
28 окт. Marcelo Martins atsakymas spalio 28 d 2011-10-28 21:53 '11, 21:53, 2011-10-28 21:53

Aš tiesiog tarpinis PHP ir šiek tiek tingus pasinerti į naują kalbą, pvz., JQuery, bet ne kitą paprastą ir elegantišką sprendimą?

 <input name="Submit1" type="submit" value="Get free quote" /> <input name="submitreset" type="submit" value="Reset" /> 

Neįmanoma pamatyti priežasties, kodėl neturite dviejų pateikimo mygtukų, tačiau skirtingų tikslų. Tada tiesiog:

 if ($_POST['submitreset']=="Reset") { $_source = "--Choose > 

Jūs paprasčiausiai nepaisysite savo vertybių pagal numatytąjį.

1
29 авг. atsakymas duotas Karel 29 rug. 2012-08-29 08:22 '12 at 8:22 am 2012-08-29 08:22

Turėjau tą pačią problemą, ir Paolo postas man padėjo, bet turėjau sukurti vieną. Mano id formoje su Advancedindexsearch yra tik įvesties laukai ir gaunamos iš sesijos vertės. Dėl kokių nors priežasčių:

 $("#advancedindexsearch").find("input:text").val(""); 

Jei po to pateiksiu įspėjimą, pamačiau teisingai ištrintas vertybes, o tada vėl buvo pakeistos. Aš vis dar nežinau, kaip ir kodėl, bet ši eilutė man padėjo:

 $("#advancedindexsearch").find("input:text").attr("value",""); 
0
08 февр. atsakymas duotas gizmo753 08 vasaris 2013-02-08 12:36 '13, 12:36 PM 2013-02-08 12:36
 <script type="text/javascript"> $("#edit_name").val('default value'); $("#edit_url").val('default value'); $("#edit_priority").val('default value'); $("#edit_description").val('default value'); $("#edit_icon_url option:selected").removeAttr("selected"); </script> 
0
05 апр. atsakymas duotas sanjay 05 balandžio 2012-04-05 08:46 '12 at 8:46 2012-04-05 08:46

Visi šie atsakymai yra geri, tačiau paprasčiausias būdas tai padaryti yra suklastotas atstatymas, ty naudojate nuorodą ir atstatymo mygtuką.

Tiesiog pridėkite CSS, kad paslėptumėte tikrąjį atstatymo mygtuką.

 input[type=reset] { visibility:hidden; height:0; padding:0;} 

Tada jūsų nuorodoje pridėsite šiuos duomenis

 <a href="javascript:{}" onclick="reset.click()">Reset form</a> <input type="reset" name="reset" id="reset" /><!--This input button is hidden--> 

Tikiuosi, kad tai padės! A.

0
24 сент. Atsakymą pateikė André Figueira 24 sep. 2011-09-24 20:45 '11, 20:45, 2011-09-24 20:45

Aš šiek tiek patobulėjau pirminį Paolo Bergantino atsakymą.

 function resetFormInputs(context) { jQuery(':input', context) .removeAttr('checked') .removeAttr('selected') .not(':button, :submit, :reset, :hidden') .each(function(){ jQuery(this).val(jQuery(this).prop('defautValue')); }); } 

Taigi, galiu perduoti bet kurį funkcijų konteksto elementą. Galiu iš naujo nustatyti visą formą arba tik tam tikrą laukų rinkinį, pavyzdžiui:

 resetFormInputs('#form-id'); // entire form resetFormInputs('.personal-info'); // only the personal info field set 

Be to, išsaugomos numatytosios įvesties vertės.

0
16 июня '14 в 23:28 2014-06-16 23:28 atsakymą pateikė „ berosoboy “ birželio 16 d. 14, 23:28 2014-06-16 23:28

Metodas, kurį naudoju gana didelėje formoje (50 + laukų), paprasčiausiai buvo iš naujo įkelti formą naudojant AJAX, daugiausia kreipiantis į serverį ir tiesiog grąžindamas laukus su numatytomis reikšmėmis. Tai yra daug lengviau, nei bandyti užfiksuoti kiekvieną lauką naudojant JS, tada nustatykite numatytąją vertę. Tai taip pat leido man išsaugoti numatytas reikšmes vienoje vietoje - serverio kodą. Ši svetainė taip pat turėjo skirtingus numatytuosius nustatymus, priklausomai nuo paskyros nustatymų, todėl aš neturėjau nerimauti dėl jų siuntimo į JS. Vienintelė nedidelė problema, su kuria turėjau susidurti, buvo keletas siūlomų laukų, kuriems reikia inicijuoti po AJAX skambučio, bet ne didelis dalykas.

0
25 марта '09 в 8:12 2009-03-25 08:12 atsakymą pateikė Darryl Hein kovo 25 d., 08:12, 2009-03-25 08:12

čia yra mano sprendimas, kuris taip pat veikia su naujomis html5 įvesties rūšimis:

  function clear_form_elements(ele) { $(ele).find(':input').each(function() { switch (this.type) { case 'checkbox': case 'radio': this.checked = false; default: $(this).val(''); break; } }); } 
0
27 авг. atsakymas duotas pubkey 27 rug . 2014-08-27 00:30 '14 - 0:30 2014-08-27 00:30

Čia yra žymimųjų >

 $('#frm').find('input:text, input:password, input:file, textarea').val(''); $('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh"); $('#frm').find('select').val('').selectmenu('refresh'); 
0
19 дек. Atsakymas pateikiamas žodžiu711 gruodžio 19 d. 2012-12-19 22:29 „12, 12:29 pm 2012-12-19 22:29

Paolo atsakyme neatsižvelgiama į datos pasirinkimą, pridėkite ją prie:

 $form.find('input[type="date"]').val(''); 
0
10 дек. Atsakymą pateikė LowGain 10 Dec. 2013-12-10 08:12 '13, 08:12 2013-12-10 08:12
 $(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true); 
-1
24 дек. Atsakymas pateikiamas mmm . 2013-12-24 15:58 '13, 15:58, 2013-12-24 15:58

Kiti klausimai apie „ žymas arba Užduoti klausimą