まず、フォームを送信するいくつかの方法を見てみましょう。 コードをコピー コードは次のとおりです。var イベントユーティリティ = { addHandler: 関数 (要素、型、ハンドラー) { 要素を追加する場合 要素にイベントリスナーを追加します(タイプ、ハンドラー、false)。 } そうでない場合 (element.attachEvent) { element.attachEvent("on" + タイプ、ハンドラー); } それ以外 { 要素["on" + タイプ] = ハンドラー; } }, getEvent: 関数 (イベント) { イベントを返します? イベント: window.event; }, 防止デフォルト: 関数 (イベント) { イベントをデフォルトにしない場合は イベントをデフォルトにしない(); } それ以外 { イベントの戻り値は false です。 } } }; var フォーム = document.getElementById("myForm"); EventUtil.addHandler(フォーム、"送信"、関数() { //イベントオブジェクトを取得する イベント = EventUtil.getEvent(イベント); //デフォルトイベントを防止 イベントをデフォルトにしない }); preventDefault() メソッドを呼び出すと、フォームが送信されなくなります。通常、この手法は、フォーム データが無効でサーバーに送信できない場合に使用されます。 5. JavaScript では、submit() メソッドをプログラムで呼び出してフォームを送信することもできます。 この方法では、フォームに送信ボタンを含める必要はなく、フォームはいつでも正常に送信できます。例を見てみましょう: var フォーム = document.getElementById("myForm"); //フォームを送信する フォームを送信します。 submit() メソッドを呼び出してフォームを送信すると、送信イベントはトリガーされないので、このメソッドを呼び出す前にフォーム データを検証することを忘れないでください。 フォームを送信するときに発生する可能性のある最大の問題は、繰り返し送信することです。初めてフォームを送信した後、長い間応答がない場合、ユーザーはイライラする可能性があります。この時点で、ユーザーは「送信」ボタンを繰り返しクリックする可能性があります。その結果、多くの場合、トラブル(サーバーが重複したリクエストを処理する必要があるため)やエラー(注文が行われた場合、複数の追加コピーが注文される可能性がある)が発生します。 この問題を解決するには 2 つの方法があります。 フォームが初めて送信された後は送信ボタンを無効にします。 後続のフォーム送信操作をキャンセルするには、onsubmit イベント ハンドラーを使用します。 次に、フォームを介して送信するいくつかの方法を詳しく紹介します。<br />方法 1: フォームの onsubmit() 関数を使用する (よく使用されます)。コードは次のとおりです。 コードをコピー コードは次のとおりです。<script type="text/javascript"> 関数validateForm(){ if(document.reply.title.value == ""){ //フォーム名でフォームを取得する alert("タイトルを入力してください!"); ドキュメントの返信タイトルにフォーカスを当てます。 false を返します。 } if(document.forms[0].cont.value == ""){ //フォーム配列からフォームを取得する alert("内容を入力してください!"); ドキュメントを返信します。 false を返します。 } true を返します。 } <form name="reply" method="post" onsubmit="return validateForm();"> <input type="text" name="title" size="80" /> <textarea name="cont" cols="80" rows="12"></textarea> <input type="submit" value="送信" > </フォーム> 知らせ: 1. onsubmit 属性には return キーワードが含まれている必要があります。含まれていない場合、関数は返されずに直接実行されます。 2.validateFormはブール値の戻り値を返す必要があります 3. 送信ボタンは送信タイプと表記する 方法 2: 入力タイプの送信コンポーネントの onclick() 関数を使用して、上記のフォーム タグ内の onsubmit="return validForm()" 属性を削除します。 次のように、「送信」ボタンに onclick イベントを追加します。 <input type="submit" value="送信" onclick="return validateForm();"> 方法 3: ボタン コンポーネントの onclick() 関数を使用して手動で送信します。コードは次のとおりです。 コードをコピー コードは次のとおりです。<script type="text/javascript"> 関数modifyItem() { if (trim(document.getElementById("itemName").value) == "") { alert("マテリアル名は空にできません!"); document.getElementById("itemName").focus(); 戻る; } (document.getElementById("itemForm")) で { メソッド = "投稿"; アクション = "item.do?command=modify&pageNo=${itemForm.pageNo}"; 提出する(); } } //戻る 関数 goBack() { window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}"; } </スクリプト> <フォーム名="itemForm" id="itemForm"> <input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" > <input name="itemName" type="text" id="itemName" value="${ item.itemName }" > <input name="btnModify" type="button" id="btnModify" value="変更" onclick="modifyItem()"> </フォーム> 知らせ: 1. 送信時に、フォームの action 属性と methods 属性を設定し、form.submit() 関数を使用して送信します。 上記のコードの具体的な実装は次のように参照できます。 http://www.bjp111.com/zhshlist.aspx http://www.bjp111.com/huixiaolist.aspx http://www.bjp111.com/daililist.aspx 初心者向け概要: フォーム内のコンポーネントを検証する場合、最初の 2 つはフォーム自体を含む name 属性を使用します。 フォームを送信しても応答がなく、フォーム送信コードに問題がないことが確実な場合は、フォームを送信する前に js コードを確認してください。以前の js コードのエラーによって、説明できない問題が発生する場合があります。 |
<<: MySQLのスペースをクリーンアップするいくつかの具体的な方法
>>: Vue でバイナリ ファイル ストリームを受信して PDF プレビューを実現する方法
フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...
最近、空港や駅でフライト情報を表示するものと似た大型スクリーンディスプレイのプロジェクトに取り組んで...
目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...
Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...
この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...
テンプレート <el-table :data="データリスト"> &...
目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...
序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...
目次1. 背景知識1. ARM64レジスタの紹介2. STP命令の詳しい説明(ARMV8マニュアル)...