CODEWITHSUNDEEP
javascriptformsinput
gwmbox
gwmbox

Reputation: 167

Javascript - adding incremental number to ID and Class

I am trying to add both an ID and class to input fields plus the addition of a number after each ID and class element so that they all have unique ID's and Class's. I need this to be added to the input fields on window load. After many attempts I am having trouble doing this with various counter suggestions.

I have now removed the non working code(s) to show where I am starting and hopefully someone can give me that extra bit of JavaScript to do this :), what I have so far is

Name: <input  placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone: <input  placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>
<script>
  function myFunc() {
  document.getElementsByTagName("input")[0].setAttribute("id", "fieldid");
  document.getElementById("fieldid").value = "Johnny Bravo";
  var element = document.getElementById("fieldid");
  element.classList.add("mystyle");
}
window.onload = myFunc;

Your help is appreciated

Upvotes: 0

Views: 1911

Answers (2)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Here is an example of how you can use the incremental values for your id and class name for the input elements:

function myFunc() {
 var inputElem = document.getElementsByTagName("input");
 for(var i=0; i < inputElem.length; i++){
    inputElem[i].setAttribute("id", "field"+i);
    inputElem[i].value = "Johnny Bravo "+i;
    inputElem[i].classList.add("mystyle" + i);
 }

}
window.onload = myFunc();
Name1: <input  placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone1: <input  placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name2: <input  placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone2: <input  placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name3: <input  placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone3: <input  placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

var elements = document.getElementsByTagName('input');

var index = 1;
for(var e of elements){
    e.setAttribute("id", "fieldid"+index);
    index++;
}

And you can do the same for the class attribute. Of course if you don't want every input element on the page to get new ids you have to use a more specific selector.

Upvotes: 0

Related Questions