Dynamic input problem - please help pulling my hair out for days

[moveitho]

Hi,

I have the following script on my site but need to implement a select menu into the script as it would make it a lot tidier.

This script adds the required amount of fields selected by the user.

[HTML]<script language="JavaScript">

function createForm4(Sell_nliving) {
data = "";
inter = "'";
if (Sell_nliving < 6 && Sell_nliving > -1) {
for (i=1; i <= Sell_nliving; i++) {
if (i < 2) spaces=" ";
else spaces=" ";

data = data + "Lounge " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_lounge" + i + inter + "'><br>";

data = data + "Dining Room " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_dining" + i + inter + "'><br>";

data = data + "Conservatory " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_conservatory" + i + inter + "'>";

data = data + "Attic " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_attic" + i + inter + "'><br>";

data = data + "Study " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_study" + i + inter + "'>";

data = data + "Games Room" + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_games" + i + inter + "'><br>";

data = data + "Reception Hall " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_reception" + i + inter + "'>";

data = data + "Utility Room " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_utility" + i + inter + "'><br>";

data = data + "Other " + i + " :" + spaces
+ "<input type='checkbox' name=" + inter
+ "Sell_other" + i + inter + "'><br>";

data = data + "Length " + i + " :" + spaces
+ "<input type='text' size=5 name=" + inter
+ "Sell_livingl" + i + inter + "'><br>";

data = data + "Width " + i + " :" + spaces
+ "<input type='text' size=5 name=" + inter
+ "Sell_livingw" + i + inter + "'><br>";

data = data + "Description <br>" + i + " :" + spaces
+ "<br><textarea size=5 name=" + inter
+ "Sell_kitdesc" + i + inter + "'></TEXTAREA><br>";

}


if (document.layers) {
document.layers.cust4.document.write(data);
document.layers.cust4.document.close();
}
else {
if (document.all) {
cust4.innerHTML = data;
}
}
}
else {
window.alert("You may only enter information for up to 7 Living Areas.");
}
}
// End -->



</script>

<input type="text" name="Sell_nliving" size="5" onchange="createForm4(counter.Sell_nliving.value); " />
</form>
[/HTML]
I then call the form using:

[HTML]<span id=cust4 style="position:relative;"></span>
[/HTML]
Instead of having all the room types as checkboxes, I would like them listed in a select menu as this would make it a lot neater for my customers.

Does anyone know how I can do this? Any help is much appreciated.

Thanks

Paul

[acoder]

To do that, you can either use a string as you're doing or the DOM methods, e.g. document.createElement(), setAttribute(), appendChild(). For the select element, you need a select element and option elements as children of that select element.

Note that the document.layers/document.all code is very old style (over 10 years old). To write cross-browser code, just use DOM methods or set the innerHTML of an element accessed using document.getElementById() which should work in all modern browsers.