Member Avatar for chakde

Hi,

I am trying to display a number of text boxes and drop down menus using a For Loop.

I can only display one of each time I select any number from the drop down menu.

Currently the For loop is commented out, but if I leave it there nothing happens at all. I don't understand why its not working with the For loop.


Many Thanks.

<html>
<head>
<title>Form</title>

<script type="text/javascript" >
function gm(guests)


	//var i=0;
	//for (i=0;i=15;i++);


	{
	
	
	var creategm = document.getElementById("creategm");
	
	creategm.innerHTML = creategm.innerHTML +"<h4>Name</h4><input type=text name='guestname'/><br/><h4>Menu</h4>Starters<SELECT size='3'><OPTION value='Cheese...'>Cheese...</OPTION><OPTION value='Food...'>Food...</OPTION><OPTION value='Other....'>Other...</OPTION></SELECT><br/>Main<SELECT size='4'><OPTION value='food....'>food....</OPTION><OPTION value='food....'>food..</OPTION><OPTION value='foood....'>foood....</OPTION><OPTION value='....'>....</OPTION></SELECT><br/>Course 3<SELECT size='3'><OPTION value='desert'>desert</OPTION><OPTION value='other'>other</OPTION><OPTION value='pudding'>pudding</OPTION></SELECT><br/>refreshments<SELECT size='2'><OPTION value='tea'>tea</OPTION></SELECT>"

	}
</script>

</head>
<body>

<form action='' method='post' id='orderf'>

	
		<label for="tickno">Ticket Number</label>
        <select id="tickno" name="tickno" class="dropdownlist" onChange="gm(this.value);" tabindex="9">
			<option>Please select</option>
            <option value="1"> 1 </option>
            <option value="2"> 2 </option>
            <option value="3"> 3 </option>
            <option value="4"> 4 </option>
			<option value="5"> 5 </option>
            <option value="6"> 6 </option>
            <option value="7"> 7 </option>
            <option value="8"> 8 </option>	
			<option value="9"> 9 </option>
            <option value="10"> 10 </option>
		</select><br/><br/>
   
        <b> Enter Names and information below</b> <br/>
		
    </p>	
	
<div id="creategm"></div>

		
	<p class="no-border">
        <input class="button" type="submit" value="Submit" tabindex="10"/>
        <input class="button" type="reset" value="Reset" tabindex="11"/>
    </p>
	
</form>
	
	</body>
	<html>
  • 4 Contributors
  • 3 Replies
  • 94 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for ShawnCplus

i=15 Should be i <= 15

Member Avatar for Airshow

Chakde,

There's all-sorts wrong here.

function gm(guests)
//shoud read
function gm() {
//guests is not used.

var i=0;
//can be simplified to
var i;

for (i=0;i=15;i++);
//shoud read
for (i=0; i<15; i++) //15 iterations (as per Shawn)
//or
for (i=0; i<=15; i++) //16 iterations (depending on what you want)
//then
{
  //The block of code to be looped must be wrapped in curly braces
}

Also nothing calls gm. Use:

onload = function(){
	gm();
};

or

<body onload="gm()">

Airshow

Member Avatar for Taywin

Not sure what you really want here. You are sending the number of guest to the script, but you are trying to loop through 15 or 16 times? The code below is what I am guessing what you are trying to do.

gm() function works with 'onchange', so you don't need to put in onload. The problem with your code are:
1) i=0;i=15;i++ // Shawn already stated that
2) for(); // no semicolon after for, or the block become a statement (end right after semicolon and ignore curly bracket)
3) var creategm inside for loop block - even though your result would display correct number of menu, it is a waste to keep creating new local variable inside a loop. The way I modified is that I create a variable outside the loop and concatenate the string. Then, assign the result to the innerHTML.

By the way, you are passing string to the function, so I convert it to integer. The parseInt function has a bug when you pass any leading zero string. For example, passing string '02' may not give you 2 when using parseInt. In order to workaround it, parseInt(string, 10) will guarantee the value of base 10.

<html>
<head>
  <title>Form</title>
  <script type="text/javascript" >
  function gm(guests) {
    var maxGm = parseInt(guests, 10), out = "";
    for (var i=0; i<maxGm; i++) {
      out += "<h4>Name</h4><input type=text name='guestname'/><br/><h4>Menu</h4>Starters<SELECT size='3'><OPTION value='Cheese...'>Cheese...</OPTION><OPTION value='Food...'>Food...</OPTION><OPTION value='Other....'>Other...</OPTION></SELECT><br/>Main<SELECT size='4'><OPTION value='food....'>food....</OPTION><OPTION value='food....'>food..</OPTION><OPTION value='foood....'>foood....</OPTION><OPTION value='....'>....</OPTION></SELECT><br/>Course 3<SELECT size='3'><OPTION value='desert'>desert</OPTION><OPTION value='other'>other</OPTION><OPTION value='pudding'>pudding</OPTION></SELECT><br/>refreshments<SELECT size='2'><OPTION value='tea'>tea</OPTION></SELECT>"
    }
    document.getElementById("creategm").innerHTML = out
  }
  </script>
</head>
<body>
<form action='' method='post' id='orderf'>
  <label for="tickno">Ticket Number</label>
  <select id="tickno" name="tickno" class="dropdownlist" onChange="gm(this.value);" tabindex="9">
    <option>Please select</option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
    <option value="6"> 6 </option>
    <option value="7"> 7 </option>
    <option value="8"> 8 </option>
    <option value="9"> 9 </option>
    <option value="10"> 10 </option>
  </select><br/><br/>
  <b> Enter Names and information below</b> <br/>

  <div id="creategm"></div>
  <p class="no-border">
  <input class="button" type="submit" value="Submit" tabindex="10"/>
  <input class="button" type="reset" value="Reset" tabindex="11"/>
  </p>
</form>
</body>
<html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.