CODEWITHSUNDEEP
javascript
thiebo
thiebo

Reputation: 1435

how to add fields with increased number in name to a form using javascript?

I have a form that looks like this:

<form action="/a1/configurer/1" method="post">

<label>Fill out a revenue (such as "salary")</label>
<input type="text" name="revenu_0[category]">
<label>And the monthly amount</label>
<input type="text" name="revenu_0[amount]">

<a href="#" onclick="add_field()">Add revenus</a>

In this add_field() function I want to add this :

<label>Fill out a revenu</label>
<input type="text" name="revenu_1[category]">
<label>And the monthly amount</label>
<input type="text" name="revenu_1[amount]">

And when clicking the button again, name is "revenu_2" and so on (incrementing).

I have tried this:

  function add_field() {
  i = 1;
   
  var extra = document.createElement("input");
  extra.setAttribute("type","text");
  extra.setAttribute("name","revenu_" + i + "[categorie]" );
    
  i = i + 1;
  document.getElementsByTagName('body')[0].appendChild(extra);

}

That's only a very small part of the solution and obviously, this doesn't increment.

How do I do this?

Upvotes: 0

Views: 80

Answers (2)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

Solution #1

var i = 1;
btn.onclick = () => {
  var label = document.createElement('label'),
    input = document.createElement('input'),
    br = document.createElement('br');
  label.innerHTML = 'Label text ';
  input.type = 'text';
  input.name = 'revenu_' + i + '[category]';
  input.placeholder = 'Field #' + i;
  myForm.appendChild(label);
  myForm.appendChild(input);
  myForm.appendChild(br);
  i++;
}
<button type="button" id="btn">Add input field</button>
<form id="myForm"></form>

Solution #2

var i = 1;
btn.onclick = () => {
  var add = `
<label>Fill out a revenu</label>
<input type="text" name="revenu_${i}[category]">
<label>And the monthly amount</label>
<input type="text" name="revenu_${i}[amount]">
<br>
`;
  myForm.insertAdjacentHTML('beforeend', add);
  console.log(add);
  i++;
}
<button type="button" id="btn">Add input field</button>
<form id="myForm"></form>

Notice that in both cases:

  • button must have id="btn";
  • form must have id="myForm".

Obviously, if you change those ids in the HTML code, you need to change them in the JS code as well.

Upvotes: 1

Nick
Nick

Reputation: 16576

You are pretty close. The important piece you're missing is to make sure i is declared outside the add_field function scope. Then, each time you call the function, the previous value of i will be persisted in the outer scope. See below for a working example.

let i = 1;

function add_field() {   
  const extra = document.createElement("input");
  extra.setAttribute("type","text");
  extra.setAttribute("name","revenu_" + i + "[categorie]" );
  extra.setAttribute("placeholder", "Field " + i);
  document.getElementsByTagName('form')[0].appendChild(extra);
  i = i + 1;
}
<button onclick="add_field()">Add field</button>

<form></form>

Upvotes: 2

Related Questions