JavaScriptでフォーム送信を傍受し、通常の送信を防止します

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関数を追加することですが、私はこの解決策が好きではありません...フォームを送信する方法はたくさんあります...たとえば、入力中にReturnキーを押すと、これは考慮されません。

Ty

<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セントです。

Edit2：私の例を更新してpreventDefault()

アタッチする要素が読み込まれる前にイベントをアタッチすることはできません

これは機能します-

プレーンJS

デモ

eventListenerの使用をお勧めします

window.addEventListener("load",function() {
  document.getElementById('my-form').addEventListener("submit",function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */

    // Should be triggered on form submit
    alert('hi');
  });
});

ただし、複数のリスナーが必要ない場合は、onloadとonsubmitを使用できます。

// Should only be triggered on first page load
alert('ho');

window.onload=function() {
    document.getElementById('my-form').onsubmit=function() {
    /* do what you want with the form */

    // Should be triggered on form submit
    alert('hi');
    // You must return false to prevent the default form behavior
    return false;
  }
}

jQuery

// Should only be triggered on first page load
alert('ho');

$(function() {
  $('#my-form').on("submit",function(e) {
    e.preventDefault(); // cancel the actual submit

    /* do what you want with the form */

    // Should be triggered on form submit

    alert('hi');
  });
});

<form onSubmit="return captureForm()"> それで十分です。captureForm()メソッドがを返すことを確認してくださいfalse。

onloadが役に立たない場合に私の練習で使用したすべてのリクエストを処理する別のオプションは、javascriptの送信、htmlの送信、ajaxリクエストを処理することです。これらのコードは、フォームをレンダリングして送信する前にリスナーを作成するために、body要素の上部に追加する必要があります。

たとえば、ページが読み込まれる前であっても、送信時にページ上の任意のフォームに非表示フィールドを設定しました。

//Handles jquery, dojo, etc. ajax requests
(function (send) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    XMLHttpRequest.prototype.send = function (data) {
        if (isNotEmptyString(token) && isNotEmptyString(header)) {
            this.setRequestHeader(header, token);
        }
        send.call(this, data);
    };
})(XMLHttpRequest.prototype.send);


//Handles javascript submit
(function (submit) {
    HTMLFormElement.prototype.submit = function (data) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('<input>').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(this);

        submit.call(this, data);
    };
})(HTMLFormElement.prototype.submit);


//Handles html submit
document.body.addEventListener('submit', function (event) {
    var token = $("meta[name='_csrf']").attr("content");
    var paramName = $("meta[name='_csrf_parameterName']").attr("content");
    $('<input>').attr({
        type: 'hidden',
        name: paramName,
        value: token
    }).appendTo(event.target);
}, false);

@Kristian Antonsenの回答を使用するか、次を使用できます。

$('button').click(function() {
    preventDefault();
    captureForm();
});