Adding input fields to a HTML form

Question

I want to dynamically add form input fields to a form using the javascript below by clicking on the add button:

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>

The function returns an i instead of incrementing and returning an integer as shown below:

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

Rayon · Accepted Answer · 2016-05-30 07:17:45Z

Concatenate variable i using +(concatenation operator) operator

The concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

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>

eol · Accepted Answer · 2016-05-30 07:18:25Z

3

You need to concatenate it like this:

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

As Rayon pointed out: keep attributes in lower case although the HTML5 standard does not require lower case attribute names (see here). W3C recommends it though and XHTML validation would fail using uppercase letters.

edited May 30, 2016 at 7:18

answered May 30, 2016 at 7:10

eol

24.7k6 gold badges53 silver badges72 bronze badges

Collectives™ on Stack Overflow

Adding input fields to a HTML form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related