[解決済み] JavaScriptでフォーム送信を妨害し、正常な送信を阻止する
2023-01-23 18:55:21
質問
javascriptを使用してフォームを送信する方法については多くの情報があるようですが、私はフォームが送信されたときにキャプチャし、javascriptでそれを傍受するためのソリューションを探しています。
HTML
<form>
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
ユーザーが送信ボタンを押したときに、私は ではなく の代わりに、JavaScriptの関数が呼び出されるようにしたいのです。
function captureForm() {
// do some stuff with the values in the form
// stop form from being submitted
}
手っ取り早いハックは、ボタンにonclick関数を追加することですが、私はこの解決策が好きではありません...フォームを送信する方法はたくさんあります...例えば、入力中にリターンを押すなど、これは考慮されません。
タイ
どのように解決するのですか?
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
JSでは
function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
// You must return false to prevent the default form behavior
return false;
}
var form = document.getElementById('my-form');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
編集
: 私の意見では、この方法は
onSubmit
属性を設定するよりも、マークアップと機能の分離が保たれるからです。しかし、これは私の2つの意見に過ぎません。
編集2
: 私の例を更新して
preventDefault()
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] Can I make a <button> not submit a form?
-
[解決済み] jQueryで'Enter'でフォームをサブミット?
-
[解決済み】フォーム送信を停止させるJavaScriptコード
-
[解決済み】送信ボタンがないのにEnterキーを押してフォームを送信する
-
[解決済み】JavaScriptのフォーム送信 - 送信の確認またはキャンセルダイアログボックス
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】フォームが送信されないようにするには?
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?