Javascript Looping Input Textboxes with Concatenation (dynamic)

Question

I am trying to make a loop using javascript. What I want this loop to do is loop two different inputs (text boxes) as many times as the loop count.

So we have two inputs and I am trying to use the concatenation +add+ to loop the text boxes and show each time it loops.

As you see I am failing somewhere because it is not duplicating the inputs or showing the numbers for the concatenation.

http://jsfiddle.net/KT123/hw0h6cr3/1/

My Desired Output
It should show four input text boxes the first two should be labeled street_1 & m2street_1 and the next two street_2 & m2street_2. These should also show "1's" on the first two labels and "2's" on the second two so that we know it worked correctly

Any help or pointers would be greatly appreciated!

var i; 
var add = i;
for (i = 1; i <= 2; i++) {
    document.write(i); 
            if (i === 10){
            document.write();
    } else {
        document.write("<br />");
    }

}

<div class="clearfix">
	<label for="street_+Add+">Mailing Address 1 +add+:</label>
	<cfinput type="text" name="street_+Add+" value="">
</div>

<div class="clearfix">
	<label for="m2street_+Add+">Mailing Address 2 +add+:</label>
	<cfinput type="text" name="m2street_+Add+" value="">
</div>

can you tell us what the desired output is?

indubitablee
– indubitablee

2015-01-23 20:04:08 +00:00
Commented Jan 23, 2015 at 20:04 — indubitablee
– indubitablee, Commented Jan 23, 2015 at 20:04
Where are you looping through the text boxes?

surajck
– surajck

2015-01-23 20:22:28 +00:00
Commented Jan 23, 2015 at 20:22 — surajck
– surajck, Commented Jan 23, 2015 at 20:22

Caner Akdeniz · Accepted Answer · 2015-01-23 20:21:45Z

2

It sounds like you want to add the html dynamically, in order to do that, you would have to create your HTML in the javascript and by using jQuery's .append() method, you would need to add your html to your body (or any other element you would like to append it to):

        for (i = 1; i <= 2; i++) {
    var myHtml = '<div class="clearfix">'
               + '   <label for="street_' + i + '">Mailing Address 1 ' + i + ':</label>'
               + '   <cfinput type="text" name="street_'+i+'" value="">'
               + '</div>'
               + '<div class="clearfix">'
               + '   <label for="m2street_'+i+'">Mailing Address 2 '+i+':</label>'
               + '   <cfinput type="text" name="m2street_'+i+'" value="">'
               + '</div>'
               + '<br />';
    $('body').append(myHtml);
}

This would give you the following output:

Mailing Address 1 1:
Mailing Address 2 1:

Mailing Address 1 2:
Mailing Address 2 2:

And here is the fiddle: http://jsfiddle.net/hw0h6cr3/2/

answered Jan 23, 2015 at 20:21

Caner Akdeniz

1,86214 silver badges20 bronze badges

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

2 Comments

Caner Akdeniz Over a year ago

you can do that by manipulating the DOM but not the way you want. You would have to use jQuery selectors. And in order to do that, you would have to create all html elements manually, then it wouldn't be dynamic anymore and it wouldn't make sense to add the index by using jQuery since you have to create each HTML element one by one.

Caner Akdeniz Over a year ago

i answered it, check it out.

indubitablee · Accepted Answer · 2015-01-23 20:45:17Z

1

$(document).ready(function() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.street').find('label').attr('for', 'street_' + (i+2));
        clone.find('.street').find('label').find('span').html(i+2);
        clone.find('.street').find('input').attr('name', 'street_' + (i+2));
        clone.find('.street').find('input').val(clone.find('.street').find('input').attr('name'));
        
        clone.find('.streetm2').find('label').attr('for', 'm2street_' + (i+2));
        clone.find('.streetm2').find('label').find('span').html(i+2);
        clone.find('.streetm2').find('input').attr('name', 'm2street_' + (i+2)); clone.find('.streetm2').find('input').val(clone.find('.streetm2').find('input').attr('name'));
        
        $('.addresses').append(clone);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addresses">
    <div id="template" class="section">
        <div class="clearfix street">
            <label for="street_1">Mailing Address 1 - <span>1</span>:</label>
            <input type="text" name="street_1" value=""/>
        </div>
        <div class="clearfix streetm2">
            <label for="m2street_1">Mailing Address 2 - <span>1</span>:</label>
            <input type="text" name="m2street_1" value=""/>
        </div>
    </div>
</div>

edited Jan 23, 2015 at 20:45

answered Jan 23, 2015 at 20:30

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

1 Comment

indubitablee Over a year ago

i is the incrementor in the for loop (increases by 1 every time), i+2 is used because in my count starts at i=0 (i could start at i=2 or whatever, its just preference) and +2 is added because your first number is 2 because 1 is already on the dom, so the loop goes 2 times and puts street address section 2 and street address section 3 in (because street address section 1 is coded in the html already). in my code, if you set var count = 5, it'll loop 5 times, and show sections 1 - 6, with everything properly labeled. i changed it to 5, have a look :]

Collectives™ on Stack Overflow

Javascript Looping Input Textboxes with Concatenation (dynamic)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related