jQueryを使ってマルチステージフォームをリセットする
このようにコード化された標準のリセットボタンを持つフォームがあります。
<input type="reset" class="button standard" value="Clear" />
問題は、このフォームは多段ソートであるため、ユーザーがステージに入力して後で戻った場合、[クリア]ボタンをクリックしても、さまざまなフィールドの「記憶されている」値はリセットされません。
私は、すべてのフィールドをループし、それらを「手動で」クリアするためにjQuery関数を添付することでうまくいくと考えています。私はすでにフォーム内でjQueryを使用していますが、速度を上げているだけなので、IDを使用して各フィールドを個別に参照する以外、これを実行する方法がわかりません。
どんな助けのためのTIA。
2012年3月に更新されました。
それで、私が最初にこの質問に答えた2年後に、私はそれがほとんど大きな混乱に変わったことを確かめるために戻ってきます。私はそれが私がそれに戻って来て、それが最も支持されている+受け入れられているので私の答えを本当に正しいようにする時間についてだと感じます。
記録的には、Titiの答えは原作者が要求したものではないので間違っています - ネイティブのreset（）メソッドを使ってフォームをリセットすることは可能ですが、この質問は覚えていないフォームをクリアしようとしていますこの方法でリセットした場合にフォームに残る値。これが「手動」リセットが必要な理由です。私はほとんどの人がGoogleの検索からこの質問にたどり着き、本当にreset（）メソッドを探していると思いますが、OPが話している特定のケースではうまくいきません。
私のオリジナルの答えはこれです：
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
これはOPを含む多くの場合にうまくいくかもしれませんが、コメントや他の回答で指摘されているように、どの属性からもラジオやチェックボックスの要素をクリアするでしょう。
もっと正しい答え（しかし完璧ではない）は：
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
:text、:radioなどのセレクターを単独で使用することは、*:textに評価されることになるのでjQueryでは悪い習慣と考えられています。私はホワイトリストアプローチを好むし、私の最初の答えでそれを使ったことを望みます。とにかく、セレクタのinput部分とform要素のキャッシュを指定することによって、これはここで最もパフォーマンスの良い答えになるはずです。
Select要素のデフォルトが空白の値を持つオプションではない場合、この回答にはまだいくつかの問題があるかもしれませんが、確かに一般的であり、ケースバイケースで処理する必要があります。 。
http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea から]：
$('#myform')[0].reset();
このような入力がある場合、myinput.val('')を設定しても「リセット」100％をエミュレートできない場合があります。
<input name="percent" value="50"/>
たとえば、デフォルト値50で入力に対してmyinput.val('')を呼び出すと空の文字列に設定されますが、myform.reset()を呼び出すと初期値の50にリセットされます。
Paoloの受け入れられた答えには大きな問題があります。検討してください：
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
.val('')行も、チェックボックスとラジオボタンに割り当てられているすべてのvalueをクリアします。だから（私のように）あなたがこのような何かをするなら：
<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />
受け入れられた答えを使うことはあなたの入力を以下に変換するでしょう：
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
おっと - 私はその値を使っていました！
これは、チェックボックスとラジオの値を保持する修正版です。
// 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');
jQueryプラグイン
必要な場所ならどこでも簡単に使えるようにjQueryプラグインを作成しました。
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;
};
だから今私は呼び出すことでそれを使用することができます：
$('#my-form').clear();
フォームをクリアするのは少しトリッキーで、見た目ほど単純ではありません。
jQueryフォームプラグイン を使用し、その clearFormを使用することをお勧めします。またはresetForm 機能。それはほとんどのコーナーケースを引き受けます。
document.getElementById（ 'frm'）。reset（）
私はいつもやる：
$('#formDiv form').get(0).reset()
または
$('#formId').get(0).reset()
検証プラグイン の使用を検討してください - それは素晴らしいことです！そしてフォームの再設定は簡単です：
var validator = $("#myform").validate();
validator.resetForm();
ここにあなたが始めるためのものがあります
$('form') // match your correct form
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank
もちろん、チェックボックスやラジオボタンがある場合は、それらを含めて.attr({'checked': false});を設定するようにこれを変更する必要があります。
editPaoloの答え はもっと簡潔です。 :inputセレクターについて知らなかったので、私の答えはもっと言葉遣いです。また、単にchecked属性を削除することについて考えませんでした。
基本的に提供された解決策のどれも私を幸せにしません。何人かの人々が指摘したように、彼らはそれをリセットする代わりにフォームを空にする。
ただし、役立つJavaScriptのプロパティがいくつかあります。
- テキストフィールドのdefaultValue
- チェックボックスとラジオボタンはdefaultChecked
- 選択オプションにdefaultSelectedを選択
これらはページがロードされたときにフィールドが持っていた値を格納します。
jQueryプラグインを書くのは簡単です：（せっかちな人のために...ここにデモがあります http://jsfiddle.net/kritzikratzi/N8fEF/1/ ）
プラグインコード
(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);
使用法
// 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();
いくつかのメモ...
- 私は新しいhtml5フォーム要素を調べていません、特別な扱いを必要とする人もいるかもしれませんが、同じ考えでうまくいくはずです。
- 要素は直接参照する必要があります。つまり
$( "#container" ).resetValue()は機能しません。常に$( "#container :input" )を使ってください。 - 上記のように、ここにデモがあります： http://jsfiddle.net/kritzikratzi/N8fEF/1/
私は Francis LewisのNice解 をわずかに変えた。彼の解決策がしないのは、ドロップダウン選択を空白にすることです。 （ほとんどの人が「クリア」したいときは、おそらくすべての値を空にしたいと思います。）これは.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;
};
あなたはこれがjQueryなしで実際にもっと簡単に解決されることを見つけるかもしれません。
通常のJavaScriptでは、これは次のように簡単です。
document.getElementById('frmitem').reset();
私たちは、コーディングを強化しスピードアップするためにjQueryを使っていますが、実際にはそれほど速くないことを常に覚えています。そのような場合は、別の方法を使用することをお勧めします。
私はこれがうまくいくと思います。
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
$(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();
});
以下のように単純にjQuery Trigger eventを使用してください。
$('form').trigger("reset");
これにより、チェックボックス、ラジオボタン、テキストボックスなどがリセットされます。基本的に、フォームはデフォルトの状態に変わります。 jQueryセレクタの内側に#ID, Class, elementを入れるだけです。
私は通常隠しリセットボタンをフォームに追加します。必要なときだけ：$（ '＃reset'）。click（）;
私はPHPの中級者であり、JQueryのような新しい言語に飛び込むのは少し怠惰ですが、以下は単純で洗練された解決策ではありませんか？
<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />
目的が異なるだけで、2つの送信ボタンがない理由がわかりません。それから単純に：
if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }
デフォルト値が想定されるものに値を再定義するだけです。
私は以下の解決策を使いました、そしてそれは私のために働きました（jQueryと伝統的なjavascriptを混ぜる）
$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
これは私のために働きました、pyrotexの答えは「選択したフィールドをリセットしませんでした、彼を取って、ここに」私の編集：
// 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);
私はPaolo Bergantinoのソリューションを使用していますが、これは優れていますが、わずかな調整が必要です。
例えば：
function jqResetForm(form){
$(':input','form[name='+form+']')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
今私はそれを使用したいときにすることができます
<span class="button" onclick="jqResetForm('formName')">Reset</span>
ご覧のとおり、これはどのフォームでも機能します。ボタンを作成するのにCSSスタイルを使用しているので、クリックしてもページは更新されません。もう一度Paoloにご協力いただきありがとうございます。唯一の問題は、フォームにデフォルト値がある場合です。
すべてのこれらの答えは良いですが、それをするための絶対的な最も簡単な方法は偽のリセットを使うことです。
本当のリセットボタンを隠すためにCSSを追加するだけです。
input[type=reset] { visibility:hidden; height:0; padding:0;}
そしてあなたのリンクにあなたは次のように追加します
<a href="javascript:{}" onclick="reset.click()">Reset form</a>
<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->
お役に立てれば！ A.
ここでチェックボックスを更新して選択します。
$('#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');
Paolo Bergantinoの最初の答えを少し改善しました
function resetFormInputs(context) {
jQuery(':input', context)
.removeAttr('checked')
.removeAttr('selected')
.not(':button, :submit, :reset, :hidden')
.each(function(){
jQuery(this).val(jQuery(this).prop('defautValue'));
});
}
このようにして、任意のコンテキスト要素を関数に渡すことができます。フォーム全体をリセットすることも、特定のフィールドのみをリセットすることもできます。次に例を示します。
resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set
さらに、入力のデフォルト値は保持されます。
<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>
私がかなり大きなフォーム（50以上のフィールド）で使った方法は、AJAXを使ってフォームをリロードすることです。基本的にはサーバーにコールバックし、フィールドをデフォルト値で返します。これは、各フィールドをJSで取得してからデフォルト値に設定するよりもはるかに簡単です。また、デフォルト値を1か所（サーバーのコード）に保持することもできました。このサイトでは、アカウントの設定に応じていくつかの異なるデフォルトもありましたので、これらをJSに送信することを心配する必要はありませんでした。私が対処しなければならなかった唯一の小さな問題はAJAX呼び出しの後に初期化を必要とするいくつかの提案フィールドでしたが、大したことではありませんでした。
私は同じ問題を抱えていました、そして、Paoloのポストは私を助けました、しかし、私は一つのことを調整する必要がありました。 ID advancedindexsearchの私のフォームは入力フィールドのみを含み、セッションから値を取得します。どういうわけか、以下は私にとってうまくいきませんでした：
$("#advancedindexsearch").find("input:text").val("");
この後に警告を出すと、値が正しく削除された場所に表示されますが、その後、値が再度置き換えられました。私はまだどのようにまたはなぜわからないが、次の行が私のためにトリックをしました：
$("#advancedindexsearch").find("input:text").attr("value","");
あなたがSELECT2プラグインを使用している場合、受け入れられた答えを補完するには、変更を加えるためにselect2スクリプトを思い出す必要がありますすべてのselect2フィールドです：
function resetForm(formId){
$('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
$('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$('.select2').select2();
}
これが私の解決策です。これは新しいhtml5 input-typesでも動作します。
/**
* removes all value attributes from input/textarea/select-fields the element with the given css-selector
* @param {string} ele css-selector of the element | #form_5
*/
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch (this.type) {
case 'checkbox':
case 'radio':
this.checked = false;
default:
$(this).val('');
break;
}
});
}
パオロの答えはデートピッカーを説明していません、これを加えてください：
$form.find('input[type="date"]').val('');