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