從下拉菜單選擇動態構建表格

我希望能夠使用下拉菜單動態地將行添加到表單（我現在已包含下面的表單）。我認爲這將是一個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

從下拉菜單選擇動態構建表格

回答

相關問題