Question

我希望能够使用下拉菜单动态地向表单添加行（我现在已经包含了下面的表单）。我认为这将是一个javascript函数，但我不确定。

我的想法是，最初在页面上显示的所有内容都是一个默认为“1”的下拉菜单，以及包含一些字段的表单的一行，例如姓名，电子邮件，年龄等。用户要求从下拉菜单中选择一个数字，然后选择任何数字，行将添加到表单中以匹配此数字。

除了（重要）之外，一旦表单完成，我希望能够通过电子邮件使用PHP提交表单中的信息，我想知道每个输入字段是否需要具有唯一ID才能传递给生成电子邮件的PHP页面。我提到这个，以防需要在用于向表中添加行的方法中加以考虑。

我很感激能帮助你解决这个问题。

谢谢，

尼克

形式：

<form id="myForm" method="POST">
<label>Please select the number of people you are booking for:</label>
<select id="myDropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/><br />
<label>name:</label> <input type="text" name="name" id="name">
<label>email:</label> <input type="text" name="email" id="email">
</form>

Answer 1

我希望能够动态使用下拉列表向表单添加行菜单。我认为这将是一个 javascript函数，但我不确定。

是的，用JavaScript做起来最容易。选择一个像jQuery这样的好工具包来帮助你导航和修改DOM。这是一个简单的骨架：

$(function() {
    var myForm = $("#myForm");
    $("#myDropDown").select(function() {
        var selected = $("option:selected", this).val();
        $("<input/>")
            .attr("type", "text")
            .attr("name", selected)
            .attr("id", selected)
            .appendTo( myForm );
    });
});

Answer 2

我认为表格需要发布非ID的唯一名称。

循环选择的数字，foreach一个人这样做。

var newInput = document.createElement("input");
newInput.Name = "Unique name to form"
newInput.Type = "text" // or whatever

document.getElementById("formId").appendChild(newInput);

请注意，使用jQuery可能会更容易，但这可以使用内置的js函数。

从下拉菜单选择中动态构建表单

2 个答案: