1. ホーム
  2. javascript

[解決済み] 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()