Menu
Hello everyone.
I have a form with a drop down menu that the user uses to select how many name fields will be showing. Currently, it functions by toggling table rows that have the name fields in them from the “display:none” css style to back to normal. This is creating a problem because when a user selects the number of name fields once and then changes their mind and selects another number of name fields, the table rows that are visible become all messed up because the fields that were previously visible are toggled back to “display:none”.
Because of this, I would like to make it so that when a user selects the number of name fields from the drop down menu, instead of toggling the table row, it makes the table rows that will show set to normal, and the other table rows that will not show to a set style of “display:none”, so that there are no jumbled up table rows.
But the only problem with that is, I hardly know anything about javascript, and have no idea how to code that.
Here is the particular portion of my form that I am talking about, along with the javascript I am currently using.
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Form document</title>
<script type=”text/javascript”>
function toggleTR(TRid){
if(document.getElementById(TRid).style.display == ‘none’){
document.getElementById(TRid).style.display = ”; // Assign empty string for deafult browser display
}else{
document.getElementById(TRid).style.display = ‘none’;
}
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>Names of Participants</legend>
<label for=”jumpMenu”>Number of people coming:</label>
<select name=”jumpMenu” id=”jumpMenu”>
<option selected=”selected”>-</option>
<option onclick=”toggleTR(‘one’);”>1</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’);”>2</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’);”>3</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’); toggleTR(‘four’);”>4</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’); toggleTR(‘four’); toggleTR(‘five’);”>5</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’); toggleTR(‘four’); toggleTR(‘five’); toggleTR(‘six’);”>6</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’); toggleTR(‘four’); toggleTR(‘five’); toggleTR(‘six’); toggleTR(‘seven’);”>7</option>
<option onclick=”toggleTR(‘one’); toggleTR(‘two’); toggleTR(‘three’); toggleTR(‘four’); toggleTR(‘five’); toggleTR(‘six’); toggleTR(‘seven’); toggleTR(‘eight’);”>8</option>
</select>
<br />
<br />
<table border=”0″>
<tr id=”one” style=”display:none;”>
<td class=”cooltd”><label for=”name1″>Name:</label></td>
<td><input type=”text” name=”FieldData3″ value=”” maxlength=”100″ size=”30″ id=”name1″ /></td>
</tr>
<tr id=”two” style=”display:none;”>
<td class=”cooltd”><label for=”name2″>Name:</label></td>
<td><input type=”text” name=”FieldData5″ value=”” maxlength=”100″ size=”30″ id=”name2″ /></td>
</tr>
<tr id=”three” style=”display:none;”>
<td class=”cooltd”><label for=”name3″>Name:</label></td>
<td><input type=”text” name=”FieldData7″ value=”” maxlength=”100″ size=”30″ id=”name3″ /></td>
</tr>
<tr id=”four” style=”display:none;”>
<td class=”cooltd”><label for=”name4″>Name:</label></td>
<td><input type=”text” name=”FieldData9″ value=”” maxlength=”100″ size=”30″ id=”name4″ /></td>
</tr>
<tr id=”five” style=”display:none;”>
<td class=”cooltd”><label for=”name5″>Name:</label></td>
<td><input type=”text” name=”FieldData11″ value=”” maxlength=”100″ size=”30″ id=”name5″ /></td>
</tr>
<tr id=”six” style=”display:none;”>
<td class=”cooltd”><label for=”name6″>Name:</label></td>
<td><input type=”text” name=”FieldData13″ value=”” maxlength=”100″ size=”30″ id=”name6″ /></td>
</tr>
<tr id=”seven” style=”display:none;”>
<td class=”cooltd”><label for=”name7″>Name:</label></td>
<td><input type=”text” name=”FieldData15″ value=”” maxlength=”100″ size=”30″ id=”name7″ /></td>
</tr>
<tr id=”eight” style=”display:none;”>
<td class=”cooltd”><label for=”name8″>Name:</label></td>
<td><input type=”text” name=”FieldData17″ value=”” maxlength=”100″ size=”30″ id=”name8″ /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
You can see that when you select all eight and then select five it becomes 8 minus 5,or three, instead of five fields like its supposed to.
It would be very helpful if you gave me ready to use html, because I know almost nothing at all about javascript.
Thank you very much!