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

我希望能够使用下拉菜单动态地将行添加到表单（我现在已包含下面的表单）。我认为这将是一个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>

来源

2011-05-13 Nick

我想能够使用下拉菜单行动态添加到表单。我认为这将是一个 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); 
    }); 
});

来源

2011-05-13 22:08:48

谢谢迈克。我添加了jQuery，并开始构建表单。我不确定如何链接脚本和表单。我现在已经在原始文章中包含了这个表单。基本上，我试图添加名称和电子邮件字段的额外行。目前，我从下拉菜单中选择一个数字时没有增加任何内容。此外，我已经计算出每行不需要不同的名称值，因为我可以将每个输入作为数组传递给生成电子邮件的PHP。 – Nick 2011-05-16 06:58:59

其他人可以帮助获取表单与下拉菜单链接吗？谢谢，尼克 – Nick 2011-05-19 20:10:28

不知道你是否知道这一点，但我会看看CGI脚本。每次脚本加载时，基本上你的php代码都会打印出html/javascript。 javascript部分负责添加表单，一旦提交完成，页面将使用query_string中保存在环境中的选项进行重新加载，以供您使用。这是你的脚本与表单链接的一种方式（即php打印语句） – imagineerThat 2013-05-30 20:51:06

我认为窗体需要唯一的名称为帖子没有ID。

循环选择的数字，每个人都这样做。

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

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

请注意，它可以用jQuery更容易完成，但这将与内置的js函数一起使用。

来源

2011-05-13 22:11:03 Vinnyq12

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

回答

相关问题