How do you include an object in a html form?

Question

I'm trying to add an object to a html form. Object will look like this:

let bestilling = {
    btnUndersider1:      500,
    btnUndersider2:      750,
    btnUndersider3:     1500,
    btnUndersider4:     4500,
}

I've tried having an invisible input field, and then using the #id.value and also #id.innerHTML, however neither of theese worked out. It's important that the object is invisible to the customers. How do i do this? Thanks.

Answer 1

You can just loop through your object. This creates a new <span> and <input> for each, with a new line. If you want to make any of them invisible, before appendChild , just apply e.style.visibility = "hidden" or "e.style.display = none" , depending on the layout you want.

let bestilling = {
    btnUndersider1:      500,
    btnUndersider2:      750,
    btnUndersider3:     1500,
    btnUndersider4:     4500,
}

for (x=0; x<Object.keys(bestilling).length; x++) {
    e = document.createElement('span');
    e.innerText = Object.keys(bestilling)[x] + " - ";
    document.body.appendChild(e);

    e = document.createElement('input');
    e.value = bestilling[Object.keys(bestilling)[x]];
    document.body.appendChild(e);
    document.body.appendChild(document.createElement('br'));
}