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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Adding input fields to a HTML form

Sign up