PDA

View Full Version : Javascript show HTML

kathryn
12-11-2002, 02:32 PM
Hi,
I have an HTML form which has the following field
<select name="NumberofAccounts">
<option value="0">0</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>
</select>

when the user selects an option I want the number selected to determine how many fields will appear below this in HTML.

Any ideas, Thanks, Kathryn
Mr J
12-11-2002, 07:53 PM
Need more info ... what fields are you refering to and how many?
chrismiceli
12-11-2002, 11:03 PM
if you mean fields as in text fields it is easy

<form name="myForm">
<select name="NumberofAccounts">
<option value="0">0</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>
</select>
<input type="button" onClick="genFields()" value="Generate Fields">
</form>
<script type="text/javascript">
function genFields() {
var test = document.myForm.options[document.myForm.options.selectedIndex].value
if (test > 0) {
for (var i = 1; i == test; i++) {
document.writeln("<input type='text' name='" + i + "'value='' size='25'>");
}
}
}
</script>
kathryn
12-12-2002, 08:18 AM
Hi,
Thanks for that but I seem to get a javascript error??
document.MyForm.options.selectedIndex is null or not an object

I have put the Javascript section in my <head> tag at the top of the page is this correct??

The fields I am trying to create are 4 text fields if the user selects 1, 8 if they select 2 and so on up to 36 if they select 9 in the drop down.


Please help!!!!
Garadon
12-12-2002, 08:57 AM
try using this line instead

document.myForm.NumberofAccounts.options[document.myForm.NumberofAccounts.options.selectedIndex].value
glenngv
12-12-2002, 09:11 AM
That code will open a new document and create the fields erasing the previous content.
If you want to retain existing fields like the select you've shown, you need to dynamically generate the fields using innerHTML or DOM
kathryn
12-12-2002, 09:52 AM
I have never used inner HTML or DOM b4 do you have any examples or know of any tutorials which could help me??
Thanks, K
chrismiceli
12-12-2002, 11:29 PM
here ya go.

<html>
<head>
<title>test
</title>
</head>
<body>
<form name="myForm">
<select name="NumberofAccounts">
<option value="0">0</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>
</select>
<input type="button" onClick="genFields()" value="Generate Fields">
</form>
<script type="text/javascript">
function genFields() {
var test = document.myForm.NumberofAccounts.options[document.myForm.NumberofAccounts.selectedIndex].value
if (test > 0) {
for (var i = 0; i != test; i++) {
document.getElementById("spanname").innerHTML += "<input type='text'><br>";
}
}
}
</script>
<span id="spanname">
</span>
</body>
</html>