• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

JavaScript Hide / Show Rows based on User Input

I've got a simple form with rows that start out hidden, but I want them to show based on user input.  I've included the code in this post.

The idea of the form (which I have simplified for ease of reading) is that the organizer of a group can register, and sign up additional friends for a bowling tournament.  If the organizer chooses to register additional bowlers, the table rows containing the fields show up, and become required.  I'm stuck at this point.

I need help on getting the rows to show, and once I do, how do I make those fields required and the ones that don't show up not required?

Thanks in advance.  I'll be monitoring email all night.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
    function addRows()
	{
		var intCount = document.getElementById("addBowlers").options.length; //gets count of items in select menu
		var intValue = document.getElementById("addBowlers").selectedIndex; //gets number (0 index) of selected item
		
			for (i=0;i<intCount;i++)
			{
				var strValue = document.getElementById("addBowlers")[i].value; //gets value of selected item
				if (i <= intValue) 
				{
					document.getElementById(strValue).style.visibility='visible';
				}
				else 
				{
					document.getElementById(strValue).style.visibility='hidden';
				}
			}
	}
</script>
</head>

<body>
<form name="teamClassic" class="thanksgivingEve" method="post" action="">
        	<fieldset>
            	<legend>
            	<h4>2011 West Park Lanes Thanksgiving Eve&nbsp;9-Pin No-Tap</h4></legend>
                
                <p>
                	<label for="organizerName">Organizer Name: <em>*</em></label>
                	<input type="text" name="organizerName" id="organizerName" size="40" class="required" value="<?php echo $form['organizerName']; ?>"><?php echo $error['organizerName']; ?>
				</p>
				<p class="info">
               	You may register and pay for up to 7 additional bowlers, which would fill a pair of lanes.&nbsp; How many additional bowlers would you like to register?</p>
               	 <label for "addBowlers">Bowlers in Addition to Organizer:  </label>
				 <select id="addBowlers" name="addBowlers" onChange="addRows() ;">
               	 	<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>
           	    </select> 
       	 		<br />
					<p>&nbsp;</p>
					<br />
           	    <table width="600" border="1" cellpadding="2" class="teamGrid">
					<tr>
						<th colspan="2" scope="col">BOWLERS ROSTER</th>
						<th width="90" scope="col">USBC<br>
							NO.
						</th>
						<th width="68" scope="col">'10-'11<br>
							AVE
						</th>
						<th width="60" scope="col">'11 CUR<br>
							AVE
						</th>
					</tr>
					<tr class="organizer">
						<th width="22" scope="row">1</th>
						<td width="216">
							<input type="text" name="nameBowler1" id="nameBowler1" class="required" size="30" value="<?php echo $form['nameBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler1" id="usbcBowler1" class="required" size="10" value="<?php echo $form['usbcBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler1" id="lastAvgBowler1" class="required" size="4" value="<?php echo $form['lastAvgBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler1" id="curAvgBowler1" class="required" size="4" value="<?php echo $form['curAvgBowler1']; ?>"><em>*</em>
						</td>
					</tr>
					<tr id="1" style="visibility: hidden">
						<th scope="row">2</th>
						<td>
							<input type="text" name="nameBowler2" id="nameBowler2" class="required" size="30" value="<?php echo $form['nameBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler2" id="usbcBowler2" class="required" size="10" value="<?php echo $form['usbcBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler2" id="lastAvgBowler2" class="required" size="4" value="<?php echo $form['lastAvgBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler2" id="curAvgBowler2" class="" size="4" value="<?php echo $form['curAvgBowler2']; ?>">
						</td>
					</tr>
					<tr id="2" style="visibility: hidden">
						<th scope="row">3</th>
						<td>
							<input type="text" name="nameBowler3" id="nameBowler3" class="required" size="30" value="<?php echo $form['nameBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler3" id="usbcBowler3" class="required" size="10" value="<?php echo $form['usbcBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler3" id="lastAvgBowler3" class="required" size="4" value="<?php echo $form['lastAvgBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler3" id="curAvgBowler3" class="" size="4" value="<?php echo $form['curAvgBowler3']; ?>">
						</td>
					</tr>
					<tr id="3" style="visibility: hidden">
						<th scope="row">4</th>
						<td>
							<input type="text" name="nameBowler4" id="nameBowler4" class="required" size="30" value="<?php echo $form['nameBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler4" id="usbcBowler4" class="required" size="10" value="<?php echo $form['usbcBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler4" id="lastAvgBowler4" class="required" size="4" value="<?php echo $form['lastAvgBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler4" id="curAvgBowler4" class="" size="4" value="<?php echo $form['curAvgBowler4']; ?>">
						</td>
					</tr>
					<tr id="4" style="visibility: hidden">
						<th scope="row">5</th>
						<td>
							<input type="text" name="nameBowler5" id="nameBowler5" class="required" size="30" value="<?php echo $form['nameBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler5" id="usbcBowler5" class="required" size="10" value="<?php echo $form['usbcBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler5" id="lastAvgBowler5" class="required" size="4" value="<?php echo $form['lastAvgBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler5" id="curAvgBowler5" class="" size="4" value="<?php echo $form['curAvgBowler5']; ?>">
						</td>
					</tr>
					<tr id="5" style="visibility: hidden">
						<th scope="row">6</th>
						<td>
							<input type="text" name="nameBowler6" id="nameBowler6" class="required" size="30" value="<?php echo $form['nameBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler6" id="usbcBowler6" class="required" size="10" value="<?php echo $form['usbcBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler6" id="lastAvgBowler6" class="required" size="4" value="<?php echo $form['lastAvgBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler6" id="curAvgBowler6" class="" size="4" value="<?php echo $form['curAvgBowler6']; ?>">
						</td>
					</tr>
					<tr id="6" style="visibility: hidden">
						<th scope="row">7</th>
						<td>
							<input type="text" name="nameBowler7" id="nameBowler7" class="required" size="30" value="<?php echo $form['nameBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler7" id="usbcBowler7" class="required" size="10" value="<?php echo $form['usbcBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler7" id="lastAvgBowler7" class="required" size="4" value="<?php echo $form['lastAvgBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler7" id="curAvgBowler7" class="" size="4" value="<?php echo $form['curAvgBowler7']; ?>">
						</td>
					</tr>
					<tr id="7" style="visibility: hidden">
						<th scope="row">8</th>
						<td>
							<input type="text" name="nameBowler8" id="nameBowler8" class="required" size="30" value="<?php echo $form['nameBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler8" id="usbcBowler8" class="required" size="10" value="<?php echo $form['usbcBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler8" id="lastAvgBowler8" class="required" size="4" value="<?php echo $form['lastAvgBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler8" id="curAvgBowler8" class="" size="4" value="<?php echo $form['curAvgBowler8']; ?>">
						</td>
					</tr>
				</table>
				<p><br/>
					<em>* denotes REQUIRED FIELD</em>				</p>
				<p class="info">&nbsp;</p>
				<!-- Need javascript form calculator -->				
				
                <p class="info2"></p>
                <br/>
                <br/>
                <input type="submit" name="submit" id="submit" value="Enter Tournament">
                
            </fieldset>
      </form>
</body>
</html>

Open in new window

0
DennisHacker
Asked:
DennisHacker
  • 4
  • 2
  • 2
  • +2
3 Solutions
 
jmgst116Commented:
id=0 for the loop does not exist in the dom since it is organizer
so you want to start loop at 1 not zero
 for (i=1;i<intCount;i++)

0
 
Peter KwanAnalyst ProgrammerCommented:
For the additional rows to show up, please replace the following line

<tr class="organizer">

with

<tr id="0" class="organizer">

and it should work.

For your second question, as I see that in your code, the column "'11 CUR AVE" is not marked with asterisk for additional rows added. Is this field required also?
0
 
DennisHackerAuthor Commented:
So good so far.  Nice catch.

For the fields that remain hidden, how do I make the fields that would normally be required not so?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
DennisHackerAuthor Commented:
pkwan:

That single field "'11 CUR AVE" is not required, because it is difficult information to obtain at the point of submitting the entry.

For the fields that remain hidden, I would like to change the requirement for those that are not.  Can I simply write another function that changes the class from "required" to "" if the intValue is greater than the value of "addBowlers"?
0
 
Peter KwanAnalyst ProgrammerCommented:
I guess it is what you want... Please correct me if anything missing:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
    function addRows()
	{
		var intCount = document.getElementById("addBowlers").options.length; //gets count of items in select menu
		var intValue = document.getElementById("addBowlers").selectedIndex; //gets number (0 index) of selected item
		
			for (i=0;i<intCount;i++)
			{
				var strValue = document.getElementById("addBowlers")[i].value; //gets value of selected item
				
				if (i <= intValue) 
				{
					document.getElementById(strValue).style.visibility='visible';
				}
				else 
				{
					document.getElementById(strValue).style.visibility='hidden';
				}
			}
	}
	
	function checkRows() {
		var intCount = document.getElementById("addBowlers").options.length;
			
		for (i=0; i<intCount; i++) 
		{
			var strValue = document.getElementById("addBowlers")[i].value;
			if (document.getElementById(strValue).style.visibility=='visible') {
				if (document.getElementById("nameBowler" + (strValue+1)).value == "") {
					alert("BOWLERS ROSTER is required");
					return false;
				}

				if (document.getElementById("usbcBowler" + (strValue+1)).value == "") {
					alert("USBC is required");
					return false;
				}

				if (document.getElementById("lastAvgBowler" + (strValue+1)).value == "") {
					alert("'10-'11 is required");
					return false;
				}
			}
		}
		
		return true;
	}
</script>
</head>

<body>
<form name="teamClassic" class="thanksgivingEve" method="post" action="" onsubmit="return checkRows();">
        	<fieldset>
            	<legend>
            	<h4>2011 West Park Lanes Thanksgiving Eve&nbsp;9-Pin No-Tap</h4></legend>
                
                <p>
                	<label for="organizerName">Organizer Name: <em>*</em></label>
                	<input type="text" name="organizerName" id="organizerName" size="40" class="required" value="<?php echo $form['organizerName']; ?>"><?php echo $error['organizerName']; ?>
				</p>
				<p class="info">
               	You may register and pay for up to 7 additional bowlers, which would fill a pair of lanes.&nbsp; How many additional bowlers would you like to register?</p>
               	 <label for "addBowlers">Bowlers in Addition to Organizer:  </label>
				 <select id="addBowlers" name="addBowlers" onChange="addRows() ;">
               	 	<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>
           	    </select> 
       	 		<br />
					<p>&nbsp;</p>
					<br />
           	    <table width="600" border="1" cellpadding="2" class="teamGrid">
					<tr>
						<th colspan="2" scope="col">BOWLERS ROSTER</th>
						<th width="90" scope="col">USBC<br>
							NO.
						</th>
						<th width="68" scope="col">'10-'11<br>
							AVE
						</th>
						<th width="60" scope="col">'11 CUR<br>
							AVE
						</th>
					</tr>
					<tr id="0" class="organizer">
						<th width="22" scope="row">1</th>
						<td width="216">
							<input type="text" name="nameBowler1" id="nameBowler1" class="required" size="30" value="<?php echo $form['nameBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler1" id="usbcBowler1" class="required" size="10" value="<?php echo $form['usbcBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler1" id="lastAvgBowler1" class="required" size="4" value="<?php echo $form['lastAvgBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler1" id="curAvgBowler1" class="required" size="4" value="<?php echo $form['curAvgBowler1']; ?>">
						</td>
					</tr>
					<tr id="1" style="visibility: hidden">
						<th scope="row">2</th>
						<td>
							<input type="text" name="nameBowler2" id="nameBowler2" class="required" size="30" value="<?php echo $form['nameBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler2" id="usbcBowler2" class="required" size="10" value="<?php echo $form['usbcBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler2" id="lastAvgBowler2" class="required" size="4" value="<?php echo $form['lastAvgBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler2" id="curAvgBowler2" class="" size="4" value="<?php echo $form['curAvgBowler2']; ?>">
						</td>
					</tr>
					<tr id="2" style="visibility: hidden">
						<th scope="row">3</th>
						<td>
							<input type="text" name="nameBowler3" id="nameBowler3" class="required" size="30" value="<?php echo $form['nameBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler3" id="usbcBowler3" class="required" size="10" value="<?php echo $form['usbcBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler3" id="lastAvgBowler3" class="required" size="4" value="<?php echo $form['lastAvgBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler3" id="curAvgBowler3" class="" size="4" value="<?php echo $form['curAvgBowler3']; ?>">
						</td>
					</tr>
					<tr id="3" style="visibility: hidden">
						<th scope="row">4</th>
						<td>
							<input type="text" name="nameBowler4" id="nameBowler4" class="required" size="30" value="<?php echo $form['nameBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler4" id="usbcBowler4" class="required" size="10" value="<?php echo $form['usbcBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler4" id="lastAvgBowler4" class="required" size="4" value="<?php echo $form['lastAvgBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler4" id="curAvgBowler4" class="" size="4" value="<?php echo $form['curAvgBowler4']; ?>">
						</td>
					</tr>
					<tr id="4" style="visibility: hidden">
						<th scope="row">5</th>
						<td>
							<input type="text" name="nameBowler5" id="nameBowler5" class="required" size="30" value="<?php echo $form['nameBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler5" id="usbcBowler5" class="required" size="10" value="<?php echo $form['usbcBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler5" id="lastAvgBowler5" class="required" size="4" value="<?php echo $form['lastAvgBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler5" id="curAvgBowler5" class="" size="4" value="<?php echo $form['curAvgBowler5']; ?>">
						</td>
					</tr>
					<tr id="5" style="visibility: hidden">
						<th scope="row">6</th>
						<td>
							<input type="text" name="nameBowler6" id="nameBowler6" class="required" size="30" value="<?php echo $form['nameBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler6" id="usbcBowler6" class="required" size="10" value="<?php echo $form['usbcBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler6" id="lastAvgBowler6" class="required" size="4" value="<?php echo $form['lastAvgBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler6" id="curAvgBowler6" class="" size="4" value="<?php echo $form['curAvgBowler6']; ?>">
						</td>
					</tr>
					<tr id="6" style="visibility: hidden">
						<th scope="row">7</th>
						<td>
							<input type="text" name="nameBowler7" id="nameBowler7" class="required" size="30" value="<?php echo $form['nameBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler7" id="usbcBowler7" class="required" size="10" value="<?php echo $form['usbcBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler7" id="lastAvgBowler7" class="required" size="4" value="<?php echo $form['lastAvgBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler7" id="curAvgBowler7" class="" size="4" value="<?php echo $form['curAvgBowler7']; ?>">
						</td>
					</tr>
					<tr id="7" style="visibility: hidden">
						<th scope="row">8</th>
						<td>
							<input type="text" name="nameBowler8" id="nameBowler8" class="required" size="30" value="<?php echo $form['nameBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler8" id="usbcBowler8" class="required" size="10" value="<?php echo $form['usbcBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler8" id="lastAvgBowler8" class="required" size="4" value="<?php echo $form['lastAvgBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler8" id="curAvgBowler8" class="" size="4" value="<?php echo $form['curAvgBowler8']; ?>">
						</td>
					</tr>
				</table>
				<p><br/>
					<em>* denotes REQUIRED FIELD</em>				</p>
				<p class="info">&nbsp;</p>
				<!-- Need javascript form calculator -->				
				
                <p class="info2"></p>
                <br/>
                <br/>
                <input type="submit" name="submit" id="submit" value="Enter Tournament">
                
            </fieldset>
      </form>
</body>
</html>

Open in new window

0
 
dimmergeekCommented:
DennisHacker

Good evening.  In general, it's not best practice to use digits as identifiers for IDs.
Additionally, I don't think you can use a JavaScript variable value as an identifier in script to modify CSS.

I have tweaked your code a bit to use named IDs and a switch statement to hide/show different IDs.

Let me know your thoughts.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
    function addRows()
	{
		var intCount = document.getElementById("addBowlers").options.length; //gets count of items in select menu
		var selectedVal = document.getElementById("addBowlers").value; //gets value of selected item
		var intValue = document.getElementById("addBowlers").selectedIndex; //gets number (0 index) of selected item
		
		switch (selectedVal)
		{
		    case "two":     document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'hidden';
		                    document.getElementById("four").style.visibility = 'hidden';
		                    document.getElementById("five").style.visibility = 'hidden';
		                    document.getElementById("six").style.visibility = 'hidden';
		                    document.getElementById("seven").style.visibility = 'hidden';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "three":   document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'hidden';
		                    document.getElementById("five").style.visibility = 'hidden';
		                    document.getElementById("six").style.visibility = 'hidden';
		                    document.getElementById("seven").style.visibility = 'hidden';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "four":    document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'visible';
		                    document.getElementById("five").style.visibility = 'hidden';
		                    document.getElementById("six").style.visibility = 'hidden';
		                    document.getElementById("seven").style.visibility = 'hidden';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "five":    document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'visible';
		                    document.getElementById("five").style.visibility = 'visible';
		                    document.getElementById("six").style.visibility = 'hidden';
		                    document.getElementById("seven").style.visibility = 'hidden';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "six":     document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'visible';
		                    document.getElementById("five").style.visibility = 'visible';
		                    document.getElementById("six").style.visibility = 'visible';
		                    document.getElementById("seven").style.visibility = 'hidden';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "seven":   document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'visible';
		                    document.getElementById("five").style.visibility = 'visible';
		                    document.getElementById("six").style.visibility = 'visible';
		                    document.getElementById("seven").style.visibility = 'visible';
		                    document.getElementById("eight").style.visibility = 'hidden';
		                    break;
		    case "eight":   document.getElementById("two").style.visibility = 'visible';
		                    document.getElementById("three").style.visibility = 'visible';
		                    document.getElementById("four").style.visibility = 'visible';
		                    document.getElementById("five").style.visibility = 'visible';
		                    document.getElementById("six").style.visibility = 'visible';
		                    document.getElementById("seven").style.visibility = 'visible';
		                    document.getElementById("eight").style.visibility = 'visible';
		                    break;
		}
	}
</script>
</head>

<body>
<form name="teamClassic" class="thanksgivingEve" method="post" action="">
        	<fieldset>
            	<legend>
            	<h4>2011 West Park Lanes Thanksgiving Eve&nbsp;9-Pin No-Tap</h4></legend>
                
                <p>
                	<label for="organizerName">Organizer Name: <em>*</em></label>
                	<input type="text" name="organizerName" id="organizerName" size="40" class="required" value="<?php echo $form['organizerName']; ?>"><?php echo $error['organizerName']; ?>
				</p>
				<p class="info">
               	You may register and pay for up to 7 additional bowlers, which would fill a pair of lanes.&nbsp; How many additional bowlers would you like to register?</p>
               	 <label for "addBowlers">Please Select Total Number of Bowlers:  </label>
				 <select id="addBowlers" name="addBowlers" onChange="javascript:addRows();">
               	 	<option value="one">1</option>
               	 	<option value="two">2</option>
               	 	<option value="three">3</option>
               	 	<option value="four">4</option>
               	 	<option value="five">5</option>
               	 	<option value="six">6</option>
               	 	<option value="seven">7</option>
               	 	<option value="eight">8</option>
           	    </select> 
       	 		<br />
					<p>&nbsp;</p>
					<br />
           	    <table width="600" border="1" cellpadding="2" class="teamGrid">
					<tr>
						<th colspan="2" scope="col">BOWLERS ROSTER</th>
						<th width="90" scope="col">USBC<br>
							NO.
						</th>
						<th width="68" scope="col">'10-'11<br>
							AVE
						</th>
						<th width="60" scope="col">'11 CUR<br>
							AVE
						</th>
					</tr>
					<tr class="organizer">
						<th width="22" scope="row">1</th>
						<td width="216">
							<input type="text" name="nameBowler1" id="nameBowler1" class="required" size="30" value="<?php echo $form['nameBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler1" id="usbcBowler1" class="required" size="10" value="<?php echo $form['usbcBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler1" id="lastAvgBowler1" class="required" size="4" value="<?php echo $form['lastAvgBowler1']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler1" id="curAvgBowler1" class="required" size="4" value="<?php echo $form['curAvgBowler1']; ?>"><em>*</em>
						</td>
					</tr>
					<tr id="two" style="visibility: hidden">
						<th scope="row">2</th>
						<td>
							<input type="text" name="nameBowler2" id="nameBowler2" class="required" size="30" value="<?php echo $form['nameBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler2" id="usbcBowler2" class="required" size="10" value="<?php echo $form['usbcBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler2" id="lastAvgBowler2" class="required" size="4" value="<?php echo $form['lastAvgBowler2']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler2" id="curAvgBowler2" class="" size="4" value="<?php echo $form['curAvgBowler2']; ?>">
						</td>
					</tr>
					<tr id="three" style="visibility: hidden">
						<th scope="row">3</th>
						<td>
							<input type="text" name="nameBowler3" id="nameBowler3" class="required" size="30" value="<?php echo $form['nameBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler3" id="usbcBowler3" class="required" size="10" value="<?php echo $form['usbcBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler3" id="lastAvgBowler3" class="required" size="4" value="<?php echo $form['lastAvgBowler3']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler3" id="curAvgBowler3" class="" size="4" value="<?php echo $form['curAvgBowler3']; ?>">
						</td>
					</tr>
					<tr id="four" style="visibility: hidden">
						<th scope="row">4</th>
						<td>
							<input type="text" name="nameBowler4" id="nameBowler4" class="required" size="30" value="<?php echo $form['nameBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler4" id="usbcBowler4" class="required" size="10" value="<?php echo $form['usbcBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler4" id="lastAvgBowler4" class="required" size="4" value="<?php echo $form['lastAvgBowler4']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler4" id="curAvgBowler4" class="" size="4" value="<?php echo $form['curAvgBowler4']; ?>">
						</td>
					</tr>
					<tr id="five" style="visibility: hidden">
						<th scope="row">5</th>
						<td>
							<input type="text" name="nameBowler5" id="nameBowler5" class="required" size="30" value="<?php echo $form['nameBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler5" id="usbcBowler5" class="required" size="10" value="<?php echo $form['usbcBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler5" id="lastAvgBowler5" class="required" size="4" value="<?php echo $form['lastAvgBowler5']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler5" id="curAvgBowler5" class="" size="4" value="<?php echo $form['curAvgBowler5']; ?>">
						</td>
					</tr>
					<tr id="six" style="visibility: hidden">
						<th scope="row">6</th>
						<td>
							<input type="text" name="nameBowler6" id="nameBowler6" class="required" size="30" value="<?php echo $form['nameBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler6" id="usbcBowler6" class="required" size="10" value="<?php echo $form['usbcBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler6" id="lastAvgBowler6" class="required" size="4" value="<?php echo $form['lastAvgBowler6']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler6" id="curAvgBowler6" class="" size="4" value="<?php echo $form['curAvgBowler6']; ?>">
						</td>
					</tr>
					<tr id="seven" style="visibility: hidden">
						<th scope="row">7</th>
						<td>
							<input type="text" name="nameBowler7" id="nameBowler7" class="required" size="30" value="<?php echo $form['nameBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler7" id="usbcBowler7" class="required" size="10" value="<?php echo $form['usbcBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler7" id="lastAvgBowler7" class="required" size="4" value="<?php echo $form['lastAvgBowler7']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler7" id="curAvgBowler7" class="" size="4" value="<?php echo $form['curAvgBowler7']; ?>">
						</td>
					</tr>
					<tr id="eight" style="visibility: hidden">
						<th scope="row">8</th>
						<td>
							<input type="text" name="nameBowler8" id="nameBowler8" class="required" size="30" value="<?php echo $form['nameBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="usbcBowler8" id="usbcBowler8" class="required" size="10" value="<?php echo $form['usbcBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="lastAvgBowler8" id="lastAvgBowler8" class="required" size="4" value="<?php echo $form['lastAvgBowler8']; ?>"><em>*</em>
						</td>
						<td align="center">
							<input type="text" name="curAvgBowler8" id="curAvgBowler8" class="" size="4" value="<?php echo $form['curAvgBowler8']; ?>">
						</td>
					</tr>
				</table>
				<p><br/>
					<em>* denotes REQUIRED FIELD</em>				</p>
				<p class="info">&nbsp;</p>
				<!-- Need javascript form calculator -->				
				
                <p class="info2"></p>
                <br/>
                <br/>
                <input type="submit" name="submit" id="submit" value="Enter Tournament">
                
            </fieldset>
      </form>
</body>
</html>

Open in new window

0
 
ddayx10Commented:
There are probably a million ways you might go about what you are asking. Just fiddling around I put together an example for you below with comments. You should be able to plug this JS in with your original html and have it work.
<script language="javascript" type="text/javascript">
    function addRows()
	{
		var intCount = document.getElementById("addBowlers").options.length; //gets count of items in select menu
		var intValue = document.getElementById("addBowlers").selectedIndex; //gets number (0 index) of selected item
		
			//change by setting i to 1 initally instead of 0 (caused error below)
			for (i=1;i<intCount;i++)
			{
				//will error if i begins at 0
				var strValue = document.getElementById("addBowlers")[i].value; //gets value of selected item
				if (i <= intValue) 
				{
					document.getElementById(strValue).style.visibility='visible';
				}
				else 
				{
					document.getElementById(strValue).style.visibility='hidden';
				}
			}
	}
	
	//Im going to do this in a very verbose way to make it easier to follow and hopefully more flexible
	//for your to update as you go.
	function validateRequired()
	{
		//create an array of the rows holding potential required inputs(1-7)
		var bowlerFields = 
		[document.getElementById('1'),
		document.getElementById('2'),
		document.getElementById('3'),
		document.getElementById('4'),
		document.getElementById('5'),
		document.getElementById('6'),
		document.getElementById('7')
		];
		
		var rValue = true;
		
		//loop through all fields with potentially required rows
		for(var i = 0; i<bowlerFields.length;i++)
		{
			//detect if row is visible (meaning it will have required inputs)
			if(bowlerFields[i].style.visibility=='visible')
			{
				//loop through the inputs in each row
				for(var j = 0; j<4; j++)
				{
					//check input is not empty, if empty make background red, reset background
					var oneRequiredInput = bowlerFields[i].getElementsByTagName('input')[j];
					if(oneRequiredInput.value.length == 0)
					{
						oneRequiredInput.style.backgroundColor = 'red';
						rValue = false;
					}
					else
					{
						//only really used if submit is pressed twice
						//if row was red first time but then fixed we want it to display normally.
						oneRequiredInput.style.backgroundColor = '';
					}
				}
			}
		}
		
		return rValue;
	}
</script>



***********HTML CHANGE************

<input onclick="return validateRequired();" type="submit" name="submit" id="submit" value="Enter Tournament">

Open in new window

0
 
ddayx10Commented:
LOL lots of answers, looks like everyone is looking for a bit of a simple puzzle to solve... my excuse is I was bored!
0
 
DennisHackerAuthor Commented:
Wow!  Thanks for all the responses.  I'm sure I will learn from each.  Give me some time to review each and I'll be back soon!
0
 
DennisHackerAuthor Commented:
I still have a couple of issues but each of you helped me see things that I wanted to do differently on my project.  I'll be back for more help.

This is the basis for higher use, as I have a larger project that will cause this whole thing to evolve.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 4
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now