如何使用 javascript（不使用 jquery）将 HTML 表单数据发送到 JSON？

Question

On submit, I want to send form data to json. I want to use json so I can send the data to Python for processing. I am not using jquery.

I have the following HTML code:

<form id="frm1">
        <label for="first">First name: <input type="text" id="first" name="first"></label><br><br>
        <label for="last">Last name: <input type="text" id="last" name="last"></label><br>
        <input type="submit" value="Submit">
</form>

I attempted to send the data to JSON using the following JS code:

form.addEventListener('submit', sendData)

function sendData(event){

//retreives form input
const first = form.querySelector('input[name="first"]');
const last = form.querySelector('input[name="last"]');

var xhr = new XMLHttpRequest();
var url = "formResults.json";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.first+ ", " + json.last);
    }
};
var data = JSON.stringify({first, last});
xhr.send(data);
}

I am running the code in a local server and am seeing no output to the json file or any error code.

How do I get my form data to json?

Novice coder

Answer 1

This really is quite an open question. You have provided no details on the model in which the data needs to be provided as. I'm going to assume you need an object similar to the below.

{
    first: 'John',
    last: 'Smith'   
}

If this is the case, you could use the below code.

var serializeForm = function (form) {

    // Setup our serialized data
    var serialized = {};

    // Loop through each field in the form
    for (var i = 0; i < form.elements.length; i++) {

        var field = form.elements[i];

        // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
        if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;

        // If a multi-select, get all selections
        if (field.type === 'select-multiple') {
            for (var n = 0; n < field.options.length; n++) {
                if (!field.options[n].selected) continue;
                serialized[field.name] = field.options[n].value
            }
        }

            // Convert field data to a query string
        else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
            serialized[field.name] = field.value
        }
    }

    return serialized;

};

Then you could use your code ...

form.addEventListener('submit', sendData)

function sendData(event){

    //retreives form input
    const formData = serializeForm(form);

    var xhr = new XMLHttpRequest();
    var url = "YOUR_ENDPOINT_NEEDS_TO_GO_HERE";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var json = JSON.parse(xhr.responseText);
            console.log(json);
        }
    };
    var data = JSON.stringify(formData);
    xhr.send(data);
}

You can see the above using the codepen linked here . In the example, the object is created immediately, so right-click anywhere in the preview window, view console and you'll see the output of the serializeForm method.

Credit goes to: https://gomakethings.com/how-to-serialize-form-data-with-vanilla-js/ where I got the initial code from and modified it to your (assumed) needs.