將輸入字段添加到HTML表單

Question

我想通過單擊添加按鈕使用以下JavaScript將表單輸入字段動態添加到表單：

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>

該函數返回一個i而不是遞增並返回一個整數，如下所示：

<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>

Answer 1

使用+(concatenation operator)運算符連接變量i

該連接運算符(+)連接兩個字符串值連接在一起，返回另一個字符串，它是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> 

Answer 2

您需要像這樣將其串聯：

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

正如Rayon指出的那樣：盡管HTML5標准不要求使用小寫的屬性名稱（請參閱此處 ），但應將屬性保持小寫。 不過W3C推薦這樣做，並且XHTML驗證將無法使用大寫字母。