如何在 html 表单中包含对象？答案

【问题标题】：How do you include an object in a html form?如何在 html 表单中包含对象？
【发布时间】：2019-06-22 15:09:00
【问题描述】：

我正在尝试将对象添加到 html 表单。对象将如下所示：

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

我尝试使用不可见的输入字段，然后使用#id.value 和#id.innerHTML，但是这些都没有成功。重要的是该对象对客户是不可见的。我该怎么做呢？谢谢。

【问题讨论】：

将value 属性设置为JSON.stringify(bestilling)。
如何提交表格？你是靠<form action=...还是用Javascript代码提交？
@Pointy value 属性？
@niry 我正在使用 BS4，它是通过一个带有 'type="Submit" '的按钮提交的
value 元素的<input> 属性。您并没有真正描述太多您期望在表单中“包含”对象的效果。

标签： javascript html forms object

【解决方案1】：

你可以只循环你的对象。这会为每个新的 <span> 和 <input> 创建一个新行。如果您想让它们中的任何一个不可见，请在 appendChild 之前应用 e.style.visibility = "hidden" 或 "e.style.display = none"，具体取决于您想要的布局。

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'));
}

【讨论】：