JavaScript'te bir form gönderimine müdahale edin ve normal gönderimi önleyin

JavaScript kullanarak bir formun nasıl gönderileceğine dair çok fazla bilgi var gibi görünüyor, ancak bir form gönderildiğinde yakalamak ve javascript'e müdahale etmek için bir çözüm arıyorum.

HTML

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

Bir kullanıcı gönder düğmesine bastığında, formun gönderilmesini istemiyorum, bunun yerine bir JavaScript işlevinin çağrılmasını istiyorum.

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

Hızlı bir hack, düğmeye bir onclick işlevi eklemek olabilir, ancak bu çözümü sevmiyorum ... bir form göndermenin birçok yolu var ... örneğin, bir giriş üzerindeyken return tuşuna basmak, ki bunu hesaba katmaz.

Ty

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

JS'de:

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

Düzenleme : Bence bu yaklaşım, onSubmitbiçimlendirme ve işlevsellik ayrımını koruduğu için özelliği formda ayarlamaktan daha iyidir . Ama bu sadece iki sentim.

Edit2 : Örneğim güncellendipreventDefault()

Eklediğiniz öğeler yüklenmeden olay ekleyemezsiniz

Bu çalışıyor -

Düz JS

DEMO

EventListener kullanılması önerilir

// Should only be triggered on first page load
console.log('ho');

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
    console.log('hi');
  })
});

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

ancak birden fazla dinleyiciye ihtiyacınız yoksa onload ve onsubmit kullanabilirsiniz

// Should only be triggered on first page load
console.log('ho');

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

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

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

jQuery

// Should only be triggered on first page load
console.log('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

    console.log('hi');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

<form onSubmit="return captureForm()"> yapmalı. captureForm()Yönteminizin geri döndüğünden emin olun false.

Onload'un yardımcı olamadığı durumlar için uygulamamda kullandığım tüm istekleri işlemek için bir başka seçenek de javascript submit, html submit, ajax isteklerini ele almaktır. Bu kod, herhangi bir form oluşturulmadan ve gönderilmeden önce dinleyici oluşturmak için gövde öğesinin üst kısmına eklenmelidir.

Örneğin, sayfa yüklenmeden önce olsa bile, gizli alanı gönderirken sayfadaki herhangi bir forma ayarlıyorum.

//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'in cevabını kullanın veya şunu kullanabilirsiniz:

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