Chặn gửi biểu mẫu bằng JavaScript và ngăn chặn gửi thông thường

Có vẻ như có nhiều thông tin về cách gửi biểu mẫu bằng javascript, nhưng tôi đang tìm giải pháp để nắm bắt khi nào biểu mẫu đã được gửi và chặn nó bằng javascript.

HTML

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

Khi người dùng nhấn nút gửi, tôi không muốn gửi biểu mẫu mà thay vào đó tôi muốn một hàm JavaScript được gọi.

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

Một cách nhanh chóng là thêm chức năng onclick vào nút nhưng tôi không thích giải pháp này ... có nhiều cách để gửi biểu mẫu ... ví dụ: nhấn quay lại khi đang nhập dữ liệu đầu vào, điều này không tính đến.

Ty

<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

Trong 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);
}

Chỉnh sửa : theo ý kiến ​​của tôi, cách tiếp cận này tốt hơn là đặt onSubmitthuộc tính trên biểu mẫu vì nó duy trì sự tách biệt giữa đánh dấu và chức năng. Nhưng đó chỉ là hai xu của tôi.

Edit2 : Đã cập nhật ví dụ của tôi để bao gồmpreventDefault()

Bạn không thể đính kèm các sự kiện trước khi các phần tử mà bạn đính kèm chúng đã tải

Những công việc này -

JS đơn giản

BẢN GIỚI THIỆU

Được đề xuất sử dụng 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');
  });
});

nhưng nếu bạn không cần nhiều hơn một người nghe, bạn có thể sử dụng onload và 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()"> điều đó nên làm. Đảm bảo rằng captureForm()phương thức của bạn trả về false.

Một tùy chọn khác để xử lý tất cả các yêu cầu mà tôi đã sử dụng trong thực tế của mình cho các trường hợp khi tải lên không thể giúp được là xử lý các yêu cầu gửi javascript, gửi html, ajax. Những mã này nên được thêm vào phần trên cùng của phần thân để tạo trình xử lý trước khi bất kỳ biểu mẫu nào được hiển thị và gửi.

Trong ví dụ, tôi đặt trường ẩn thành bất kỳ biểu mẫu nào trên trang khi gửi nó ngay cả khi nó xảy ra trước khi tải trang.

//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);

Sử dụng câu trả lời của @Kristian Antonsen hoặc bạn có thể sử dụng:

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