How to submit a form using JS?

1 year ago
Emily Johnson
2 minutes

You can achieve submitting a form using JavaScript by following these steps:

  1. Retrieve an element by its ID.
  2. Retrieve an element using querySelector()
var form = document.getElementById("myForm");
  1. addEventListener() – a function that is used to listen for specific events on a given element and execute a specified function when the event occurs.
  2. hand in
form.addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    // 在这里执行表单提交的逻辑
});
  1. components
  2. – Moniker
  3. – worth
var formData = new FormData(form);
var data = {};

for (var pair of formData.entries()) {
    data[pair[0]] = pair[1];
}
  1. AJAX request
  2. retrieve
var xhr = new XMLHttpRequest();
xhr.open("POST", "submit-url", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // 请求成功处理逻辑
    }
};

xhr.send(JSON.stringify(data));

Complete code example:

<form id="myForm">
    <input type="text" name="name" id="name">
    <input type="email" name="email" id="email">
    <button type="submit">提交</button>
</form>

<script>
var form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    event.preventDefault();

    var formData = new FormData(form);
    var data = {};

    for (var pair of formData.entries()) {
        data[pair[0]] = pair[1];
    }

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "submit-url", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            // 请求成功处理逻辑
        }
    };

    xhr.send(JSON.stringify(data));
});
</script>
bannerAds