ウェブフォーム送信方法の詳細な概要

ウェブフォーム送信方法の詳細な概要

まず、フォームを送信するいくつかの方法を見てみましょう
1. <!--一般的な送信ボタン-->
<input type="submit" value="送信">
2. <!--カスタム送信ボタン-->
<button type="Submit">送信</button>
3. <!--画像ボタン-->
<input type="image" src = "btn.png">
説明: ユーザーがボタンまたは画像ボタンをクリックすると、フォームが送信されます。送信ボタンは、<input> または <button> のいずれかを使用して、その属性値を「submit」に設定することで定義できます。一方、イメージ ボタンは、<input> の type 属性値を「image」に設定することで定義されます。したがって、コードによって生成されたボタンをクリックするだけで、フォームを送信できます。
4. フォームの送信を防止する: 上記のいずれかのボタンがフォーム内に存在する限り、対応するフォーム コントロールにフォーカスがあるときに Enter キーを押すとフォームが送信できます。フォームに送信ボタンがない場合、Enter キーを押してもフォームは送信されません。
この方法でフォームを送信すると、ブラウザはサーバーにリクエストを送信する前に送信イベントを発生させます。これにより、フォーム データを検証し、フォームの送信を許可するかどうかを決定できるようになります。このイベントのデフォルトの動作を防止すると、フォームの送信がキャンセルされます。たとえば、次のコードはフォームの送信を防ぎます。

コードをコピー
コードは次のとおりです。

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&pa​​geNo=${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 プレビューを実現する方法

推薦する

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...

MySQLの指定順序ソートクエリについての簡単な説明

最近、空港や駅でフライト情報を表示するものと似た大型スクリーンディスプレイのプロジェクトに取り組んで...

Node.js でメモリ効率の高いアプリケーションを作成する方法

目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

JavaScript を使用した Web 計算機の作成

この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...

React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....

Linuxにグラフィカルインターフェースをインストールする方法

1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...

Vue イベントの $event パラメータ = イベント値の場合

テンプレート <el-table :data="データリスト"> &...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

目次1. 背景知識1. ARM64レジスタの紹介2. STP命令の詳しい説明(ARMV8マニュアル)...