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.
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 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. 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> </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"> </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>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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"?
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"?
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 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. 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> </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"> </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>
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.
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 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. 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> </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"> </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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
LOL lots of answers, looks like everyone is looking for a bit of a simple puzzle to solve... my excuse is I was bored!
ASKER
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!
ASKER
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.
This is the basis for higher use, as I have a larger project that will cause this whole thing to evolve.
ASKER
For the fields that remain hidden, how do I make the fields that would normally be required not so?