• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • 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 KwanCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 KwanCommented:
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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