CODEWITHSUNDEEP
javascripthtmlforms
simanacci
simanacci

Reputation: 2344

Adding input fields to a HTML form

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>

Upvotes: 0

Views: 2280

Answers (2)

eol
eol

Reputation: 24565

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.

Upvotes: 3

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 4

Related Questions