HTML フォームの送信ボタンに「送信」という名前を付けると問題が発生するのはなぜですか?
-
22-08-2019 - |
質問
ASP.NET Web フォームと ASP 3 (クラシック ASP) では、フォーム送信ボタンに「送信」という名前を付けると「問題が発生する」という問題に遭遇しました。以下はレンダリングされた HTML です。
<input type="submit" name="Submit" value="Submit" id="Submit" />
私が「物事を壊す」と言ったのは、なぜ何が起こったのか正確にわからないからです。しかし、症状は通常、送信ボタンを押しても何も起こらないことがあるというものでした。それはうまくいきませんでした。しかし、時にはそれがうまくいったこともありました。
実際、以下のコードを使用して簡単な 1 ページのテストを作成したところ、送信は正常に動作しました。
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtTest" runat="server" />
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</form>
しかし, 過去にもこの問題が発生しており、ボタンの名前を変更すると必ず症状が解消されました。
それでは、HTML/HTTP/ブラウザの専門家は、送信ボタンに id="submit" を設定すると問題が発生する理由を知っていますか?
編集
これ SOコメント 「submit」が予約されたキーワードであることを示唆しているようです。しかし、なぜ「id」または「name」属性がこれに干渉するのでしょうか?そして、この「予約済み」キーワードは、競合を引き起こすような方法でどのように実装されるのでしょうか?
再度、感謝します
解決
の form
要素には という名前のメソッドがあります submit
, ですが、フォーム内のフォーム要素もメンバーとして持ちます。
という名前のフォームにボタンがある場合、 submit
, 、次を使用してアクセスできます document.form1.submit
. 。ただし、それと同じ名前なので、 submit
メソッドが存在しない場合、そのメソッドにアクセスする方法はなくなります。フォームを送信するメソッドを使用すると、それは機能しなくなります。
たとえば、JavaScript を使用してフォームを送信するボタンがある場合、それは機能しません。
<input type="button" name="submit" onclick="this.form.submit();" value="try" />
ボタンが使用しようとすると、 submit
メソッドを使用すると、代わりにそれ自体への参照を取得します (ボタンは関数ではないため、呼び出ししようとするとエラー メッセージが表示されます)。
他のヒント
JavaScript の DOM の予約語はすべて避けてください。定義するものすべての前に「my」を使用するか、$ など、予約語と明らかに競合しないものを使用してください。予約語は誤ってオーバーロードして大混乱を引き起こす可能性があります。
イベントをオブジェクトにバインドできるように生成される分離コードには、指定した値に基づいて名前が付けられます。
フォーム送信で問題が発生した場合は onsubmit を使用してください
<form id="form1" runat="server" onsubmit="this.submit()">
<div>
<asp:TextBox ID="txtTest" runat="server" />
<asp:Button ID="Submit" runat="server" Text="Submit" Type="submit"/>
</div>
</form>