html 表单中在另一个文本字段中输入数字后的附加文本字段

Question

我正在使用 html 表单将数据发送到 sql 数据库，使用 php。

我的问题是我有一个动态值，它会根据每个订单而变化，并且我试图避免必须为所有订单添加 x 数量的额外文本字段。

更好的解决方案是在文本字段中输入一个值，然后在表单中显示相同数量的附加文本字段。

有没有办法做到这一点？

谢谢

Answer 1

好的。因此，您希望在按下 submit 按钮之前应用户请求显示多个输入字段。我的第一个方法是 在 javascript.

让我们假设这种形式：

<form>
<p><input name="myInput1" /></p>
<button type="submit">submit</button>
</form>

您可以添加一个额外的按钮来添加新行：

<form>
<p><input name="myInput1" /></p>
<button type="button" onclick="addInput(this.form)">add input</button>
<button type="submit">submit</button>
</form>

... 处理函数将是这样的：

<script type="text/javascript">
function addInput(form)
{
    // Create a new <p><input> node at the end of the form, throughput the DOM API:

    // Get the last <p> element of the form
    var paragraphs=form.getElementsByTagName("P")
    var lastParagraph=paragraphs[paragraphs.length-1]

    // Create a new <p> element with a <input> child:
    var newParagraph=document.createElement("P")
    var newInput=document.createElement("INPUT")
    // Name the <input> with a numeric suffix not to produce duplicates:
    newInput.name="myInput"+(1+paragraphs.length)
    newParagraph.appendChild(newInput)

    // Add the created <p> after the last existing <p> of the form:
    form.insertBefore(newParagraph, lastParagraph.nextSibling)
}
</script>

（注意所有的渲染逻辑都是在客户端（在HTML+javascript）执行的，最后提交表单的时候, 服务器将只接收名称 + 值对的集合。)

html 表单中在另一个文本字段中输入数字后的附加文本字段

additional text fields in html form after a numeric entry in another text field

text

field

dynamic