javascript - 提交使用Javascript构建的表单时出错(Error while submitting a form built with Javascript)

Question

I have to create a form based on a received object: At this stage I have 2 input type text, 1 input date, 1 select.(我必须基于接收到的对象创建一个表单：在此阶段，我有2种输入类型的文本，1种输入日期和1种选择。)

[
    {"name" : "name", "fieldType": "input", "type": "text", "values": []},
    {"name" : "surname", "fieldType": "input", "type": "text", "values": []},
    {"name" : "address", "fieldType": "input", "type": "text", "values": []},
    {"name" : "birthdate", "fieldType": "input", "type": "date", "values": []},
    {"name" : "sex", "fieldType": "select", "type": null, "values": 
        [{"key": "1", "value": "Male"}, {"key": "2", "value": "Female"}]
    },
]

Now to create the form i created a method :(现在要创建表单，我创建了一个方法：)

const buildForm = () => {
    let requestForm = document.createElement('form');
    requestForm.setAttribute("id", "requestForm");

    let parentFormDiv = document.getElementById("displayForm");
    parentFormDiv.appendChild(requestForm);

    let formRow = document.createElement('div');
    formRow.setAttribute("class", "row");

    let butRow = document.createElement('div');
    butRow.setAttribute("class", "row");

    let formElt = document.getElementById('requestForm');
    formElt.appendChild(formRow);
    formElt.appendChild(butRow);

    formInputs.forEach(element => {
        // for inputs : works for date & text
        if(element.fieldType === "input") {
            formRow.innerHTML += `
                <label for="${element.name}">${element.name}</label>
                <input id="${element.name}" name="${element.name}" type="${element.type}" >
            `;
        }
        // for selects
        if(element.fieldType === "select") {
            formRow.innerHTML += `
                <label for="${element.name}">${element.name}</label>
                <select id="${element.name}" name="${element.name}"></select>
            `;

            let selectId = element.name;
            let selectList = document.getElementById(selectId);

            for (let item of element.values) {
                let option = document.createElement('option');
                option.value = item.key;
                option.text = item.value;
                selectList.appendChild(option);
            }
            formRow.innerHTML += `</select>`;
        }
        butRow.innerHTML= `<button id="btnOk" name="btnOk" class="btn btn-primary">Button</button>`;
    });
};

I call this method onLoad :(我将此方法称为onLoad：)

window.addEventListener("load", buildForm);

It builds correctly the form as expected.(它可以正确构建预期的表单。)

My issue concerns how i send the form and convert it onto json.(我的问题涉及我如何发送表单并将其转换为json。)

I added another eventListener on the form :(我在表单上添加了另一个eventListener：)

const form = document.getElementById('requestForm');
form.addEventListener("submit", handleFormSubmit);

In order to manage the submit, I added a method :(为了管理提交，我添加了一个方法：)

const handleFormSubmit = event => {
    // Stop the form from submitting since we’re handling that with AJAX.
    event.preventDefault();
    // Call our function to get the form data.
    const data = formToJSON(form.elements);
    // Demo only: print the form data onscreen as a formatted JSON object.
    console.log(data);
    const dataContainer = document.getElementsByClassName('results__display')[0];
    dataContainer.textContent = JSON.stringify(data, null, "  ");

    console.log(data);    
};

Which calls this conversion method :(哪个调用此转换方法：)

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
    // Make sure the element has the required properties and should be added.
    if (isValidElement(element) && isValidValue(element)) {
        // Some fields allow multiple values => require arrays
        if (isCheckbox(element)) {
            data[element.name] = (data[element.name] || []).concat(element.value);
        } else if (isMultiSelect(element)) {
            data[element.name] = getSelectValues(element);
        } else {
            data[element.name] = element.value;
        }
    }
    return data;
}, {});

I obtain this error message : Uncaught TypeError: Cannot read property 'addEventListener' of null.(我收到此错误消息：未捕获的TypeError：无法读取null的属性'addEventListener'。)

This error concerns this specific line :(此错误涉及以下特定行：)

form.addEventListener("submit", handleFormSubmit);

And i'm not entering in the method while debugging.(而且我在调试时没有输入方法。)

I can't remove the create attribute of the form because this code is going to be implemented in a Sharepoint online WebPart component.(我无法删除表单的create属性，因为此代码将在Sharepoint在线WebPart组件中实现。)

  ask by davidvera translate from so