Retrieve input values from dinamically genrated HTMLElement form? - html

Question

I'm currently on an Angular project (I'm a begineer) and I created a function to create a HTML form depending on the content of a JSON (the form then allows me to push new data in the JSON). It works, displays the form, but I didn't think ahead, and don't know how to retrieve the input values from the user.
createNewLineForm() {
if (this.allowForm) {
let indiceList = 0;
this.formOn = true;
for (let jsonCol of this.columnData) {
if (jsonCol.visible === true && jsonCol.type === "Boolean") {
var content = document.getElementById("formcontent");
var listTitle = document.createElement("header");
listTitle.textContent = jsonCol.name;
content.appendChild(listTitle);
var selectList = document.createElement("select");
selectList.id = "trueFalse";
content.appendChild(selectList);
var option = document.createElement("option");
option.value = "true";
option.text = "true";
selectList.appendChild(option);
var option2 = document.createElement("option");
option2.value = "false";
option2.text = "false";
selectList.appendChild(option2)
}
if (jsonCol.visible === true && jsonCol.type === "String" && jsonCol.dropdownList === null) {
var content = document.getElementById("formcontent");
var inputTitle = document.createElement("header");
inputTitle.textContent = jsonCol.name;
content.appendChild(inputTitle);
var formInput = document.createElement("input");
formInput.type = "text";
formInput.placeholder = jsonCol.name;
formInput.name = "text";
content.appendChild(formInput);
}
if (jsonCol.visible === true && jsonCol.type === "String" && jsonCol.dropdownList != null) {
var content = document.getElementById("formcontent");
var listTitle = document.createElement("header");
listTitle.textContent = jsonCol.name;
content.appendChild(listTitle);
var selectListLong = document.createElement("select");
selectListLong.name ="longList";
indiceList++;
content.appendChild(selectListLong);
for (const options of jsonCol.dropdownList) {
var option = document.createElement("option");
option.value = options;
option.text = options;
selectListLong.appendChild(option);
}
}
}
var submit = document.createElement("input");
submit.type = "submit";
content.appendChild(submit);
}
}
It's then conditionnally called in my HTML window with a simple <div id="formcontent"> </div>
I tried using document.getElementByName('...').value, doesn't seem to work.
Btw, if you have another idea on how to make that form, I'd like hearing it as well, this method seems a bit messy I think.

Answer 1

var content = document.getElementById("formcontent").value;
You can try it by ID