添加輸入字段到一個HTML表單

我想通過點擊添加按鈕使用下面的JavaScript來動態地添加形式輸入字段以一種形式：添加輸入字段到一個HTML表單

var i = 0; 
function increment() { 
i += 1; 
} 

function addfieldFunction() { 
    var r = document.createElement('div'); 
    var y = document.createElement("INPUT"); 
    var z = document.createElement("INPUT"); 
    y.setAttribute("class", "dash-input"); 
    y.setAttribute("type", "text"); 
    y.setAttribute("placeholder", "University"); 
    z.setAttribute("class", "dash-input"); 
    z.setAttribute("type", "text"); 
    z.setAttribute("placeholder", "Course"); 
    increment(); 
    y.setAttribute("Name", "a_level[ + i ][0]"); 
    r.appendChild(y); 
    z.setAttribute("Name", "a_level[ + i ][1]"); 
    r.appendChild(z); 
    document.getElementById("form-div").appendChild(r); 
} 



<form class = "dash-form" method = "POST" action = "/" > 
    <div id = "form-div"> 
     <input class = "dash-input" type = "text" name = "a_level[+i][0]" value = "" placeholder = "University"/> 
     <input class = "dash-input" type = "text" name = "a_level[+i][1]" value = "" placeholder = "Course"/> 
    </div> 
    <div class = "dash-submit"> 
     <input class = "dash-submit-button" type = "submit" value = "Submit"/> 
    </div> 
</form> 
<div class = "dash-add"> 
    <button class = "dash-add-button" onclick = "addfieldFunction()">ADD</button> 
</div>

該函數返回一個我代替遞增和返回一個整數如下所示：

<div id = "form-div"> 
    <input class = "dash-input" type = "text" name = "a_level[0][0]" value = "" placeholder = "University"/> 
    <input class = "dash-input" type = "text" name = "a_level[0][1]" value = "" placeholder = "Course"/> 
</div>

來源

2016-05-30 roy

串聯可變i使用+(concatenation operator)操作者

concatenation operator (+)將兩個字符串值連接在一起，返回另一個字符串，即兩個操作數字符串的union。

var i = 0; 
 

 
function increment() { 
 
    i += 1; 
 
} 
 

 
function addfieldFunction() { 
 
    var r = document.createElement('div'); 
 
    var y = document.createElement("INPUT"); 
 
    var z = document.createElement("INPUT"); 
 
    y.setAttribute("class", "dash-input"); 
 
    y.setAttribute("type", "text"); 
 
    y.setAttribute("placeholder", "University"); 
 
    z.setAttribute("class", "dash-input"); 
 
    z.setAttribute("type", "text"); 
 
    z.setAttribute("placeholder", "Course"); 
 
    increment(); 
 
    y.setAttribute("name", "a_level[ " + i + " ][0]"); //Keep attribute in lower case 
 
    r.appendChild(y); 
 
    z.setAttribute("name", "a_level[ " + i + "][1]"); 
 
    r.appendChild(z); 
 
    document.getElementById("form-div").appendChild(r); 
 
}

<form class="dash-form" method="POST" action="/"> 
 
    <div id="form-div"> 
 
    <input class="dash-input" type="text" name="a_level[+i][0]" value="" placeholder="University" /> 
 
    <input class="dash-input" type="text" name="a_level[+i][1]" value="" placeholder="Course" /> 
 
    </div> 
 
    <div class="dash-submit"> 
 
    <input class="dash-submit-button" type="submit" value="Submit" /> 
 
    </div> 
 
</form> 
 
<div class="dash-add"> 
 
    <button class="dash-add-button" onclick="addfieldFunction()">ADD</button> 
 
</div>

來源

2016-05-30 07:09:06 Rayon

您需要連接這樣的：

y.setAttribute("name", "a_level[" + i +"][0]");

人造纖維指出：保持在較低的情況下，屬性雖然HTML5標準並不要求較低的情況下屬性名稱（見here）。 W3C推薦它，而XHTML驗證會使用大寫字母失敗。

來源

2016-05-30 07:10:25 eol

添加輸入字段到一個HTML表單

回答

相關問題