Loop over an array and create form input tags after labels

Question

Im trying to loop over an array to create some form tags, depending on how many values there are in the array. So far i have got my label and input tags that are being created. The problem i am having is displaying the input tags correctly after the labels. Any help would be much appreciated!

I'm trying to achieve:

<label class="material-label" for="leather_materials">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

my code so far:

materialArray = ['leather','suade','nubuck'];

//loop over material array 
for( i = 0; i < materialArray.length;  i++) {

    //create label elements
    var matLabel = document.createElement('label');
    matLabel.setAttribute('for', materialArray[i] + '_materials');
    matLabel.setAttribute('class', 'material-label');
    console.log(matLabel);

    //add text to label elements
    var matLabelTextNode = document.createTextNode(materialArray[i]);
    matLabel.appendChild(matLabelTextNode);

    //create input elements
    var matInput = document.createElement('input');
    matInput.className = 'shoe-materials';
    matInput.setAttribute('class', 'shoe-materials');
    matInput.setAttribute('id', materialArray[i] +'_materials');
    matInput.setAttribute('name', 'materials');
    matInput.setAttribute('type', 'radio');
    matInput.setAttribute('value', materialArray[i]);
    console.log(matInput);   

    //append to parent div
    addMaterials.appendChild(matLabel);    
    $('.material-label').after(matInput);        
}

I tried using jQuery after() but it went a bit messed up and got the following

<label class="material-label" for="leather_materials">leather</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">suade</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">nubuck</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

Kamina · Accepted Answer · 2015-05-01 19:59:10Z

Mistake you're doing is appending those elements after the .material-label element. So you keep adding them after the labels which has already that class.

From :

$('.material-label').after(matInput);

To:

$(matLabel).after(matInput);

Updated code:

var addMaterials = document.getElementById("addMaterials");
materialArray = ['leather','suade','nubuck'];

//loop over material array 
for( i = 0; i < materialArray.length;  i++) {

    //create label elements
    var matLabel = document.createElement('label');
    matLabel.setAttribute('for', materialArray[i] + '_materials');
    matLabel.setAttribute('class', 'material-label');
    console.log(matLabel);

    //add text to label elements
    var matLabelTextNode = document.createTextNode(materialArray[i]);
    matLabel.appendChild(matLabelTextNode);

    //create input elements
    var matInput = document.createElement('input');
    matInput.className = 'shoe-materials';
    matInput.setAttribute('class', 'shoe-materials');
    matInput.setAttribute('id', materialArray[i] +'_materials');
    matInput.setAttribute('name', 'materials');
    matInput.setAttribute('type', 'radio');
    matInput.setAttribute('value', materialArray[i]);
    console.log(matInput);   

    //append to parent div
    addMaterials.appendChild(matLabel);    
    $(matLabel).after(matInput);        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="addMaterials"></div>

puzzle_fuzzle · Accepted Answer · 2015-05-01 20:05:31Z

1

The jQuery statement $('.material-label') selects every element with that class, so when you use $('.material-label').after(matInput), you are adding the contents of matInput after each of the three labels.

To get the current label, just use i as the index for the array returned by $('.material-label').

Changing

//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);

To

//append to parent div
currentLabel = $('.material-label')[i];
$(currentLabel).after(matInput);

Will get the results you want.

answered May 1, 2015 at 20:05

puzzle_fuzzle

3792 silver badges10 bronze badges

Comments

Sam Abushanab · Accepted Answer · 2015-05-01 19:59:28Z

0

Change '.material-label' to matLabel

$(matLabel).after(matInput);

Here is the JSFiddle: https://jsfiddle.net/82o6hfna/

answered May 1, 2015 at 19:59

Sam Abushanab

4933 silver badges13 bronze badges

1 Comment

Matta301 Over a year ago

I cant believe it was that easy! I have been pulling my hair out. Thank you very much

nickmenow · Accepted Answer · 2015-05-01 20:09:52Z

I never liked the object manipulation approach to building html. I like to build the string of html then insert it into the dom. Just my opinion.

JS

//to uppercase of first letter only
String.prototype.toUpperCaseFirstLetter = function() {
    var s = this;
    return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}

var materialArray = ['leather','suade','nubuck'];

function buildMaterialRadios () {
    var str = '';
    for (var i = 0; i < materialArray.length; i++) {
      var item = materialArray[i];
      str += '<label class="material-label" for="'+item+'_materials">'+item.toUpperCaseFirstLetter()+'</label><input id="'+item+'_materials" class="shoe-materials" type="radio" name="materials" value="'+item+'">';
    };

    document.getElementById('material_selections').innerHTML = str;
}


buildMaterialRadios();

HTML

<form name="shoebuilderform">

<div id="material_selections"></div>

</form>

http://jsfiddle.net/qcmdnd4d/

Collectives™ on Stack Overflow

Loop over an array and create form input tags after labels

4 Answers 4

Comments

Comments

1 Comment

JS

HTML

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

JS

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Related