javascript for loop to print multiple lines within html div

Question

I've seen a bunch of examples that are close, but none that are right on.

I'm building a program that is an HTA form where people can enter multiple lines of similar data (ex. mailing addresses). The number of lines that the user will enter is determined by an input box that receives a number:

<html>
  <head>
    <title>Data Entry Application</title>
    <hta:application id = "ExampleHTA" singleInstance = "yes" icon = "macexp.ico" border = "thin" minimizeButton = "no" maximizeButton = "no" scroll = "yes" />

    <script language="javascript" type="text/javascript">
      function numOfLines(choice)
      {
        for(var i = 0; i < choice; ++i)
        {
          document.getElementById("addy_lines").innerHTML = "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";
        }
      }
    </script>
  </head>
  <body>
    <form>
      Number of Address Lines: <input type="text" id="AddyLines" size=2 maxlength=2 onChange="numOfLines(this.value);">
      <div id="addy_lines"></div>
    </form>
  </body>
</html>

http://jsfiddle.net/isherwood/r9KEH/

When the user enters a number in the AddyLines input box, the same number of lines should appear in the div id="addy_lines" section.

Example: The user enters 5, then five input lines should be created. Currently, only one address input line gets created within the div tags.

Like Jurik mentioned, you're creating duplicate IDs. Use classes or increment. — isherwood
– isherwood, Commented Apr 23, 2014 at 15:05

Jurik · Accepted Answer · 2014-04-23 15:06:56Z

2

You wrote:

document.getElementById("addy_lines").innerHTML = "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";

but you need to add the string, not overwrite the innerHTML:

document.getElementById("addy_lines").innerHTML+= '<br/>' +
     'Name: <input type="text" id="Name" size="50" maxlength="50" /> ' +
     'Address: <input type="text" id="Address" size="50" maxlength="50" /> ' +
     'City: <input type="text" id="City" size="15" maxlength="15" /> ' +
     'State: <input type="text" id="State" size="2" maxlength="2" /> ' +
     'Zip Code: <input type="text" id="Zip" size="5" maxlength="5" />';

But overall it is a bad solution, because now you have several input fields with same id but id should be unique.

So this might be much better:

document.getElementById("addy_lines").innerHTML+= '<br />' +
    'Name: <input type="text" id="Name-' + i + '" size="50" maxlength="50" /> ' +
    'Address: <input type="text" id="Address-' + i + '" size="50" maxlength="50" /> ' +
    'City: <input type="text" id="City-' + i + '" size="15" maxlength="15" /> ' +
    'State: <input type="text" id="State-' + i + '" size="2" maxlength="2" /> ' +
    'Zip Code: <input type="text" id="Zip-' + i + '" size="5" maxlength="5" />';

Further I would give all elements a name and use classes instead of id to target them better with jQuery. But that is up to you.

edited Apr 23, 2014 at 15:06

answered Apr 23, 2014 at 15:01

Jurik

3,2641 gold badge34 silver badges52 bronze badges

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

1 Comment

Lou Over a year ago

This solution worked: document.getElementById("addy_lines").innerHTML+=.... I will look into giving the elements their own name. Thanks. :)

Дамян Станчев · Accepted Answer · 2014-04-23 15:01:00Z

0

How about changing

document.getElementById("addy_lines").innerHTML = "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";

to

document.getElementById("addy_lines").innerHTML = document.getElementById("addy_lines").innerHTML + "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";

You should append the changes and not replace them.

answered Apr 23, 2014 at 15:01

Дамян Станчев

2,6745 gold badges31 silver badges53 bronze badges

1 Comment

Jurik Over a year ago

Not that good because now he has same ids and they should be unique.

Collectives™ on Stack Overflow

javascript for loop to print multiple lines within html div

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related