web-dev-qa-db-ja.com

フォームのリセットが機能しない

次のコードを使用してフォームフィールドをリセットしています。

document.getElementById("form1").reset();//form1 is the form id.

動作していません。 JQueryも試してみました。 JQueryでさえも機能しません。

$("#reset").click(function(){
$('form1')[0].reset();
});

私のhtmlコードは

<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>

私はフォローしています W3Schools 。これが私の フィドル です。間違いを説明してもらえますか？

javascriptjqueryhtmlformsreset
6
Lingasamy Sakthivel

問題は、ボタンIDを"reset"に設定することです。そのため、フォームのリセットメソッドはbutton要素によって上書きされました。ボタンに別のIDを使用するだけです。

<form name="form1" id="form1" method="post">

<h3>Personal Information</h3> 

<h4>Name</h4>

    <input type="text" id="fname" name="fname" maxlength="50" size="11" />
    <input type="text" id="mname" name="mname" maxlength="15" size="8" />
    <input type="text" id="lname" name="lname" maxlength="50" size="11" />
    <input type="button" id="resetBtn" value="Reset" />
</form>

また、インラインイベントハンドラーは避けてください。実際のスクリプト内でイベントをバインドします。
これを参照 フィドル 。

15
sudee

私はついに問題を解決しました。問題は"id=reset"です。 resetメソッドをオーバーライドするためです。 id="reset1"に変更しました。今それは働いています

3
Lingasamy Sakthivel

単にこれを試してみましたか： リセット

<input type="reset" value="Reset"/>
2
Ankit Tyagi

タグ名がform1の要素のように$（ 'form1'）を選択しているように見えますが、実際にはIDで選択したいと思います。

$('#form1')[0].reset();
2
stilliard

JQueryの場合、正しいセレクターは次のとおりです。

$('#form1') // Select with ID

OR

$('form[name=form1]') // Select with name
1
Elorfin

フォームをリセットすることだけが目的の場合は、次のことを試すことができます。

<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
1
silverbeak

フィドル を更新しました。

Vanilla jsが機能しない理由：

あなたは持っていません...

document.getElementById("form1").reset();//form1 is the form id.

...リセット機能内。あなたはこれを行うことができます：

function Reset() {
    document.getElementById("form1").reset();//form1 is the form id.
}

JQueryが機能しない理由：

あなたがしていることすべてをする必要はありません。それよりもはるかに簡単です。また、「form1」セレクターも確認してください。代わりに「＃form1」を追加する必要があります。 jQueryの選択はgetElementByID関​​数とは異なります。名前から推測できるように、getElementByID関​​数はすでにIDで要素を取得しています。ただし、jQueryではそれらを指定する必要があります。また、jqueryではonClick属性は実際には必要ありません。

0
mborg

わかりました。新しいjsfiddleを参照してください。 http://jsfiddle.net/ty9rU/17/ ボタンの名前をreset_btnに変更しました。

基本的に、フォーム内にresetという要素があり、それが問題の原因でした。

0
stilliard