A
acecraig100
I am fairly new to Javascript. I have a form that users fill out to
enter an animal to exhibit at a fair. Because we have no way of
knowing, how many animals a user may enter, I created a table with a
createElement function to add additional entries. The table has the
first row of input text boxes already in it. You have to click a button
to add another row. That seems to be working fine. How
do I pull the information from the input boxes to do calculations such
as count the number of animals exhibiting.
I also have the form set up to only show the <div> from the department
in which the animal is being entered. So based on the radio button that
is selected from that department will determining
which calculations I need to make.
My last question and I hope it is appropriate for me to ask it here is
about the format of my table. I would like for the table to adjust to
the content that is in the cells. The columns are so wide.
Is there a way to do this without setting a fixed pixel width?
I am putting these questions on a couple of javascript newsgroups in
hopes of getting some direction. Thank you for your help.
Amy
Here is some of the coding on my form:
<title>Livestock Entry Form Page 2</title>
<style type="text/css">
table { border-style: groove; border-width: medium }
thead { text-align: center; vertical-align: bottom }
tbody { text-align: left }
div.collapseInfo { display: none }
</style>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var count = 2;
function changeDiv(breeds) {
document.getElementById('beef').style.display = "none";
document.getElementById('dairy').style.display = "none";
document.getElementById('llama').style.display = "none";
document.getElementById('dairyGoat').style.display = "none";
document.getElementById('boerGoat').style.display = "none";
document.getElementById('wetherGoat').style.display = "none";
document.getElementById('sheep').style.display = "none";
document.getElementById('swine').style.display = "none";
document.getElementById(breeds).style.display = "block";
}
function addExhibit() { //determines where to add new itme in the
options[] array.
var table = document.getElementById('exhibit');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');
var td6 = document.createElement('td');
var td7 = document.createElement('td');
var td8 = document.createElement('td');
var td9 = document.createElement('td');
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');
var inp3 = document.createElement('input');
var inp4 = document.createElement('input');
var inp5 = document.createElement('input');
var inp6 = document.createElement('input');
var inp7 = document.createElement('input');
var inp8 = document.createElement('input');
var inp9 = document.createElement('input');
inp1.setAttribute("Name", "class" + count);
inp2.setAttribute("Name", "birthdate" + count);
inp3.setAttribute("Name", "animalName" + count);
inp4.setAttribute("Name", "regNumber" + count);
inp5.setAttribute("Name", "sireName" + count);
inp6.setAttribute("Name", "sireRegNumber" + count);
inp7.setAttribute("Name", "damName" + count);
inp8.setAttribute("Name", "damRegNumber" + count);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
tr.appendChild(td8);
tr.appendChild(td9);
td1.appendChild(inp1);
td2.appendChild(inp2);
td3.appendChild(inp3);
td4.appendChild(inp4);
td5.appendChild(inp5);
td6.appendChild(inp6);
td7.appendChild(inp7);
td8.appendChild(inp8);
td9.appendChild(inp9);
inp1.setAttribute("value", count);
++count;
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<form>
<p>Only one dept per entry form. Complete a new entry form for a
different department.</p>
<p>Please select the department in which you want to enter.</p>
<p><input type="radio" name="breed" value="dept1"
onclick="changeDiv('beef')" /> Beef<br />
<input type="radio" name="breed" value="dept2"
onclick="changeDiv('dairy')" /> Dairy<br />
<input type="radio" name="breed" value="dept3"
onclick="changeDiv('dairyGoat')" /> Dairy Goat<br />
<input type="radio" name="breed" value="dept4"
onclick="changeDiv('boerGoat')" /> Boer Goat<br />
<input type="radio" name="breed" value="dept5"
onclick="changeDiv('wetherGoat')" /> Jr Wether Goat<br />
<input type="radio" name="breed" value="dept6"
onclick="changeDiv('llama')" /> Llama<br />
<input type="radio" name="breed" value="dept7"
onclick="changeDiv('sheep')" /> Sheep<br />
<input type="radio" name="breed" value="dept8"
onclick="changeDiv('swine')" /> Swine<p />
<p>Fill out the information for each animal entered below. Dairy Goats
& Llama do NOT need to fill out sire and dam information </p>
<table>
<thead>
<tr>
<th>Entry #</th>
<th>Class #</label></th>
<th>Animal's<br />
Date of<br />
Birth</th>
<th>Animal's Name</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number</th>
<th>Name of Sire</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number of sire</th>
<th>Name of Dam</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number of dam</th>
</tr>
</thead>
<tbody id="exhibit">
<tr>
<td><input type="text" name="entry1" value=1 /></td>
<td><input type="text" name="class1" value="" /></td>
<td><input type="text" name="birthdate1"
value="" /></td>
<td><input type="text" name="animalName1"
value="" /></td>
<td><input type="text" name="regNumber1"
value="" /></td>
<td><input type="text" name="sireName1"
value="" /></td>
<td><input type="text" name="sireRegNumber1"
value="" /></td>
<td><input type="text" name="damName1"
value="" /></td>
<td><input type="text" name="damRegNumber1"
value="" /></td>
</tr>
</tbody>
</table>
<p><input type="button" name="add" value="Add Exhibit"
onclick="addExhibit();" /></p>
<hr />
<h3>Acceptance of Rules and Regulations:</h3>
<p>I hereby certify that animals listed are entered for exhibition in
accordance with rules and regulations ....p>
<p><input type="radio" name="accept" value="yes" /> I agree.</p>
<p><input type="radio" name="accept" value="no" /> I do not
agree.</p>
<hr />
<div id="beef" class="collapseInfo">
<h2><strong>Beef Fees</strong></h2></p>
<p><strong>Stall Fees</strong></p>
<p>$20/head through August 15, $30/head Augusut 16 through August 25,
and $45/head after August 25.</p>
<p>Tie(s) Needed: <input type="text" name="beefTieNumber" value=""
size="5" /> Total Tie Cost: <input type="text" name="beefTieCost"
value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="beefBeddingNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="beefBeddingCost" value="" size="10" /></p>
<p></p>Ks Gelbvieh Association Entry Fee - Enter the number of
Gelbvieh Entered ($15 per head) </p>
<p>Gelbvieh head: <input type="text" name="gelbviehNumber" value=""
size="5" /> Total Gelbvieh Cost: <input type="text"
name="gelbviehCost" size="10" /></p>
<p></p>Ks Simmental Association Entry Fee - Enter the number of
Simmental Entered ($10 per head) </p>
<p>Gelbvieh head: <input type="text" name="simmentalNumber" value=""
size="5" /> Total Gelbvieh Cost: <input type="text"
name="simmentalCost" size="10" /></p>
<p>Beef Cow/Calf Jackpot ($25.00 per pair)</p>
Cow/Calf Pairs Entered: <input type="text" name="jackpotNumber"
value="" size="5" /> Total Jackpot Cost: <input type="text"
name="jackpotCost" size="10" /></p>
</div>
<div id="dairy" class="collapseInfo">
<h2></h2><strong>Dairy Fees</strong></h2>
<p><strong>Stall Fees:</strong></p>
<p>$20/head through August 15, $30/head Augusut 16 through August 25,
and $45/head after August 25.</p>
<p>Stall(s) Needed: <input type="text" name="dairyStallNumber"
value="" size="5" /> Total Tie Cost: <input type="text"
name="dairyStallCost" value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="dairyBeddingNumber"
value="" size="5" /> Total Bedding Cost: <input type="text"
name="dairyBeddingCost" value="" size="10" /></p>
</div>
<div id="dairyGoat" class="collapseInfo">
<h2><strong>Dairy Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4
Jr per pen)</p>
<p>Bedding Needed: <input type="text" name="dgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="dgoatPenCost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="dgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="dgoatHeadCost"
value="" size="10" /></p>
</div>
<div id="boerGoat" class="collapseInfo">
<h2><strong>Boer Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4 Jr
per pen)</p>
<p>Bedding Needed: <input type="text" name="bgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="bgoatPenCost"
value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="bgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="bgoatHeadCost"
value="" size="10" /></p>
</div>
<div id="wetherGoat" class="collapseInfo">
<h2><strong>Jr. Wethered Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4 Jr
per pen)</p>
<p>Bedding Needed: <input type="text" name="wgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="wgoatPenCost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="wgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="wgoatHeadCost" value="" size="10" /></p>
</div>
<div id="llama" class="collapseInfo">
<h2><strong>Llama Fees</strong></h2>
<p><strong>Stall Fees: </strong> $15.00/pen through August 15, $20/pen
August 16 through August 25, and $40/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="llamaPenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="llamaPenCost"
value="" size="10" /></p>
</div>
<div id="sheep" class="collapseInfo">
<h2><strong>Sheep Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="sheepPenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="sheepPenCost"
value="" size="10" /></p>
<p>Shepherd's Lead ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="shepherdAge" value="" size="5"
/> Shepherd's Lead Cost: <input type="text" name="shepherdCost"
size="10" /></p>
<p>Decorator's Class ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="decoratorAge" value="" size="5"
/> Shepherd's Lead Cost: <input type="text"
name="decoratorCost" size="10" /></p>
</div>
<div id="swine" class="collapseInfo">
<h2><strong>Swine Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="swinePenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="swinePenCost"
value="" size="10" /></p>
<p>Market Barrow ($10.00 per head)</p>
Market Barrow Heads Entered: <input type="text" name="barrowNumber"
value="" size="5" /> Market Barrow Cost: <input type="text"
name="barrowCost" size="10" /></p>
<p><input type="button" name="page3" value="Continue to page 3"
onclick="nextForm();" /></p>
<p><input type="reset" /></p>
</div>
</form>
</body>
</html>
enter an animal to exhibit at a fair. Because we have no way of
knowing, how many animals a user may enter, I created a table with a
createElement function to add additional entries. The table has the
first row of input text boxes already in it. You have to click a button
to add another row. That seems to be working fine. How
do I pull the information from the input boxes to do calculations such
as count the number of animals exhibiting.
I also have the form set up to only show the <div> from the department
in which the animal is being entered. So based on the radio button that
is selected from that department will determining
which calculations I need to make.
My last question and I hope it is appropriate for me to ask it here is
about the format of my table. I would like for the table to adjust to
the content that is in the cells. The columns are so wide.
Is there a way to do this without setting a fixed pixel width?
I am putting these questions on a couple of javascript newsgroups in
hopes of getting some direction. Thank you for your help.
Amy
Here is some of the coding on my form:
<title>Livestock Entry Form Page 2</title>
<style type="text/css">
table { border-style: groove; border-width: medium }
thead { text-align: center; vertical-align: bottom }
tbody { text-align: left }
div.collapseInfo { display: none }
</style>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var count = 2;
function changeDiv(breeds) {
document.getElementById('beef').style.display = "none";
document.getElementById('dairy').style.display = "none";
document.getElementById('llama').style.display = "none";
document.getElementById('dairyGoat').style.display = "none";
document.getElementById('boerGoat').style.display = "none";
document.getElementById('wetherGoat').style.display = "none";
document.getElementById('sheep').style.display = "none";
document.getElementById('swine').style.display = "none";
document.getElementById(breeds).style.display = "block";
}
function addExhibit() { //determines where to add new itme in the
options[] array.
var table = document.getElementById('exhibit');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');
var td6 = document.createElement('td');
var td7 = document.createElement('td');
var td8 = document.createElement('td');
var td9 = document.createElement('td');
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');
var inp3 = document.createElement('input');
var inp4 = document.createElement('input');
var inp5 = document.createElement('input');
var inp6 = document.createElement('input');
var inp7 = document.createElement('input');
var inp8 = document.createElement('input');
var inp9 = document.createElement('input');
inp1.setAttribute("Name", "class" + count);
inp2.setAttribute("Name", "birthdate" + count);
inp3.setAttribute("Name", "animalName" + count);
inp4.setAttribute("Name", "regNumber" + count);
inp5.setAttribute("Name", "sireName" + count);
inp6.setAttribute("Name", "sireRegNumber" + count);
inp7.setAttribute("Name", "damName" + count);
inp8.setAttribute("Name", "damRegNumber" + count);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
tr.appendChild(td8);
tr.appendChild(td9);
td1.appendChild(inp1);
td2.appendChild(inp2);
td3.appendChild(inp3);
td4.appendChild(inp4);
td5.appendChild(inp5);
td6.appendChild(inp6);
td7.appendChild(inp7);
td8.appendChild(inp8);
td9.appendChild(inp9);
inp1.setAttribute("value", count);
++count;
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<form>
<p>Only one dept per entry form. Complete a new entry form for a
different department.</p>
<p>Please select the department in which you want to enter.</p>
<p><input type="radio" name="breed" value="dept1"
onclick="changeDiv('beef')" /> Beef<br />
<input type="radio" name="breed" value="dept2"
onclick="changeDiv('dairy')" /> Dairy<br />
<input type="radio" name="breed" value="dept3"
onclick="changeDiv('dairyGoat')" /> Dairy Goat<br />
<input type="radio" name="breed" value="dept4"
onclick="changeDiv('boerGoat')" /> Boer Goat<br />
<input type="radio" name="breed" value="dept5"
onclick="changeDiv('wetherGoat')" /> Jr Wether Goat<br />
<input type="radio" name="breed" value="dept6"
onclick="changeDiv('llama')" /> Llama<br />
<input type="radio" name="breed" value="dept7"
onclick="changeDiv('sheep')" /> Sheep<br />
<input type="radio" name="breed" value="dept8"
onclick="changeDiv('swine')" /> Swine<p />
<p>Fill out the information for each animal entered below. Dairy Goats
& Llama do NOT need to fill out sire and dam information </p>
<table>
<thead>
<tr>
<th>Entry #</th>
<th>Class #</label></th>
<th>Animal's<br />
Date of<br />
Birth</th>
<th>Animal's Name</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number</th>
<th>Name of Sire</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number of sire</th>
<th>Name of Dam</th>
<th>Registration No,<br />
Ear Notch Tag Number<br />
or ALSA Number of dam</th>
</tr>
</thead>
<tbody id="exhibit">
<tr>
<td><input type="text" name="entry1" value=1 /></td>
<td><input type="text" name="class1" value="" /></td>
<td><input type="text" name="birthdate1"
value="" /></td>
<td><input type="text" name="animalName1"
value="" /></td>
<td><input type="text" name="regNumber1"
value="" /></td>
<td><input type="text" name="sireName1"
value="" /></td>
<td><input type="text" name="sireRegNumber1"
value="" /></td>
<td><input type="text" name="damName1"
value="" /></td>
<td><input type="text" name="damRegNumber1"
value="" /></td>
</tr>
</tbody>
</table>
<p><input type="button" name="add" value="Add Exhibit"
onclick="addExhibit();" /></p>
<hr />
<h3>Acceptance of Rules and Regulations:</h3>
<p>I hereby certify that animals listed are entered for exhibition in
accordance with rules and regulations ....p>
<p><input type="radio" name="accept" value="yes" /> I agree.</p>
<p><input type="radio" name="accept" value="no" /> I do not
agree.</p>
<hr />
<div id="beef" class="collapseInfo">
<h2><strong>Beef Fees</strong></h2></p>
<p><strong>Stall Fees</strong></p>
<p>$20/head through August 15, $30/head Augusut 16 through August 25,
and $45/head after August 25.</p>
<p>Tie(s) Needed: <input type="text" name="beefTieNumber" value=""
size="5" /> Total Tie Cost: <input type="text" name="beefTieCost"
value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="beefBeddingNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="beefBeddingCost" value="" size="10" /></p>
<p></p>Ks Gelbvieh Association Entry Fee - Enter the number of
Gelbvieh Entered ($15 per head) </p>
<p>Gelbvieh head: <input type="text" name="gelbviehNumber" value=""
size="5" /> Total Gelbvieh Cost: <input type="text"
name="gelbviehCost" size="10" /></p>
<p></p>Ks Simmental Association Entry Fee - Enter the number of
Simmental Entered ($10 per head) </p>
<p>Gelbvieh head: <input type="text" name="simmentalNumber" value=""
size="5" /> Total Gelbvieh Cost: <input type="text"
name="simmentalCost" size="10" /></p>
<p>Beef Cow/Calf Jackpot ($25.00 per pair)</p>
Cow/Calf Pairs Entered: <input type="text" name="jackpotNumber"
value="" size="5" /> Total Jackpot Cost: <input type="text"
name="jackpotCost" size="10" /></p>
</div>
<div id="dairy" class="collapseInfo">
<h2></h2><strong>Dairy Fees</strong></h2>
<p><strong>Stall Fees:</strong></p>
<p>$20/head through August 15, $30/head Augusut 16 through August 25,
and $45/head after August 25.</p>
<p>Stall(s) Needed: <input type="text" name="dairyStallNumber"
value="" size="5" /> Total Tie Cost: <input type="text"
name="dairyStallCost" value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="dairyBeddingNumber"
value="" size="5" /> Total Bedding Cost: <input type="text"
name="dairyBeddingCost" value="" size="10" /></p>
</div>
<div id="dairyGoat" class="collapseInfo">
<h2><strong>Dairy Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4
Jr per pen)</p>
<p>Bedding Needed: <input type="text" name="dgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="dgoatPenCost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="dgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="dgoatHeadCost"
value="" size="10" /></p>
</div>
<div id="boerGoat" class="collapseInfo">
<h2><strong>Boer Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4 Jr
per pen)</p>
<p>Bedding Needed: <input type="text" name="bgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="bgoatPenCost"
value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="bgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text" name="bgoatHeadCost"
value="" size="10" /></p>
</div>
<div id="wetherGoat" class="collapseInfo">
<h2><strong>Jr. Wethered Goat Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(2 Sr or 4 Jr
per pen)</p>
<p>Bedding Needed: <input type="text" name="wgoatPenNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="wgoatPenCost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="wgoatHeadNumber" value=""
size="5" /> Total Bedding Cost: <input type="text"
name="wgoatHeadCost" value="" size="10" /></p>
</div>
<div id="llama" class="collapseInfo">
<h2><strong>Llama Fees</strong></h2>
<p><strong>Stall Fees: </strong> $15.00/pen through August 15, $20/pen
August 16 through August 25, and $40/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="llamaPenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="llamaPenCost"
value="" size="10" /></p>
</div>
<div id="sheep" class="collapseInfo">
<h2><strong>Sheep Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="sheepPenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="sheepPenCost"
value="" size="10" /></p>
<p>Shepherd's Lead ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="shepherdAge" value="" size="5"
/> Shepherd's Lead Cost: <input type="text" name="shepherdCost"
size="10" /></p>
<p>Decorator's Class ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="decoratorAge" value="" size="5"
/> Shepherd's Lead Cost: <input type="text"
name="decoratorCost" size="10" /></p>
</div>
<div id="swine" class="collapseInfo">
<h2><strong>Swine Fees</strong></h2>
<p><strong>Pen Fees: </strong> $7.00/pen through August 15, $15/pen
August 16 through August 25, and $35/pen after August 25.(3 per
stall)</p>
<p>Pens Needed: <input type="text" name="swinePenNumber" value=""
size="5" /> Total Pen Cost: <input type="text" name="swinePenCost"
value="" size="10" /></p>
<p>Market Barrow ($10.00 per head)</p>
Market Barrow Heads Entered: <input type="text" name="barrowNumber"
value="" size="5" /> Market Barrow Cost: <input type="text"
name="barrowCost" size="10" /></p>
<p><input type="button" name="page3" value="Continue to page 3"
onclick="nextForm();" /></p>
<p><input type="reset" /></p>
</div>
</form>
</body>
</html>