How to add another input field with increment of name value using JavaScript?

Question

I have two dropdowns and two radio button groups. What I want is to add another dropdown and radio button with their updated name value.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 var i = 1;
  function textBoxCreate(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Placeholder", "Name_" + i);
y.setAttribute("Name", "Name_" + i);
document.getElementById("myForm").appendChild(y);
i++;
}

<label for="cars">Choose a car:</label>
  <select name="cars" name="CARS_1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label for="cars">Choose a range:</label>
  <input type="radio"  name="RANGE_1" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio" name="RANGE_1" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio"  name="RANGE_1" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>

  <label for="cars">Choose a car:</label>
  <select name="cars"  name="CARS_2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label for="cars">Choose a car:</label>
  <input type="radio"  name="RANGE_2" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio"  name="RANGE_2" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio"  name="RANGE_2" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>
  <button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>

How do I increment the name value of the input field using JavaScript? I don't want to use a clone.

Why not a clone? And currently, you have several items with the same ids. You may want to fix that. — Pierre
– Pierre, Commented May 10, 2021 at 13:14
add another dropdown and radio button - then why do you set the type to text? — fdomn-m
– fdomn-m, Commented May 10, 2021 at 13:28
Give some structure to that before you keep adding all those elements. Add groups not individuals — charlietfl
– charlietfl, Commented May 10, 2021 at 14:04

Ajay2707 · Accepted Answer · 2021-05-10 13:40:42Z

2

You need to give unique id and name to each control. So based on your code, change id and name for uniqueness and check the below code. Wrap your code in any control( I take div) in which you append the html at the last.

Also you did not add for remove, if you want, then you can do the same for add, just pick the index and remove the content which has the current index no.

var indexToStart=3; //here we start with 3 as we already have 2 set of controls
function addAnotherOne(){
var strBuildHtml = '<label >Choose a car:</label> \
  <select id="cars'+ indexToStart +'" name="cars'+ indexToStart +'">  \
    <option value="volvo">Volvo</option>  \
    <option value="saab">Saab</option>  \
    <option value="opel">Opel</option>  \
    <option value="audi">Audi</option>\
  </select><br>\
 <label >Choose a car:</label>\
  <input type="radio" id="age'+ indexToStart +'-1" name="age'+ indexToStart +'" value="30">\
  <label for="range'+ indexToStart +'-1">0 - 30</label><br>\
  <input type="radio" id="age'+ indexToStart +'-2" name="age'+ indexToStart +'" value="60">\
  <label for="range'+ indexToStart +'-2">31 - 60</label><br>  \
  <input type="radio" id="age'+ indexToStart +'-3" name="age'+ indexToStart +'" value="100">\
  <label for="range'+ indexToStart +'-3">61 - 100</label>\
  <br><br>'
$("#dvHtml").append(strBuildHtml);
 indexToStart = indexToStart+1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='dvHtml' >
<label >Choose a car:</label>
  <select  id="cars1" name="cars1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label >Choose a range:</label>
  <input type="radio" id="age1-1" name="age1" value="30">
  <label for="range1-1">0 - 30</label><br>
  <input type="radio" id="age1-2" name="age1" value="60">
  <label for="range1-2">31 - 60</label><br>  
  <input type="radio" id="age1-3" name="age1" value="100">
  <label for="range1-3">61 - 100</label>
  <br><br>

  <label >Choose a car:</label>
  <select id="cars2" name="cars2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label >Choose a car:</label>
  <input type="radio" id="age2-1" name="age2" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio" id="age2-2" name="age2" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio" id="age2-3" name="age2" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>
 </div>
 
  <button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>

edited May 10, 2021 at 13:40

answered May 10, 2021 at 13:29

Ajay2707

5,8286 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Carsten Løvbo Andersen Over a year ago

This will result in cloned ID's

Ajay2707 Over a year ago

changed id dynamically

Swati Over a year ago

radio button name should be same else user can check all three of them .

Ajay2707 Over a year ago

Ya, that's right, we need to grouping. updated the code

Pierre · Accepted Answer · 2021-05-10 13:20:57Z

0

How do I increment the name value of the input field using JavaScript?

Get the value you want to increment. Currently you have several items with the same ids which makes it more difficult. If you fix that, you could easily access the value, e.g. document.getElementById("uniqueID").value
Extract number from and convert to int. "RANGE_2" parseInt(str.replace('RANGE_',''));
Add 1 and concat with "RANGE_" again "RANGE_"+(i+1)

answered May 10, 2021 at 13:20

Pierre

1551 silver badge20 bronze badges

4 Comments

Anupam Mistry Over a year ago

Can you please update your answer with my current JS.

Pierre Over a year ago

Could you please use the fiddle?

Carsten Løvbo Andersen Over a year ago

@Pierre if possible you should not as for a fiddle but as the user to use Stack Overflows' snippet tool <>.

Pierre Over a year ago

Sorry, that's what I meant.

Collectives™ on Stack Overflow

How to add another input field with increment of name value using JavaScript?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related