CODEWITHSUNDEEP
javascripthtmljqueryinput
Anupam Mistry
Anupam Mistry

Reputation: 421

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

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.

Upvotes: 0

Views: 773

Answers (2)

Ajay2707
Ajay2707

Reputation: 5798

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>

Upvotes: 2

Pierre
Pierre

Reputation: 155

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

  1. 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
  2. Extract number from and convert to int. "RANGE_2" parseInt(str.replace('RANGE_',''));
  3. Add 1 and concat with "RANGE_" again "RANGE_"+(i+1)

Upvotes: 0

Related Questions