calculations using createElement input text boxes in a table

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>
 
R

RobG

David Golightly wrote:
[...]
var table = document.getElementById('exhibit');
var tr = document.createElement('tr');
var fields = ['class', 'birthdate', 'animalName', 'regNumber',
'sireName', 'sireRegNumber', 'damName', 'damRegNumber'];
for (var i=0; i<fields.length; i++) {
var inp = document.createElement('input');
var td = document.createElement('td');
td.appendChild(inp);
tr.appendChild(td);
if (i===0) inp.setAttribute('value', '1');
table.appendChild(tr);
Click to expand...

Ooops, that won't work in IE - it will only append rows to tableSection
elements, not table elements. The easiest solution here is to create
the tr using insertRow():

var tr = table.insertRow(-1);

and the new row is appended as the last row in the table so you can
remove the table.appendChild(...) line. You can do the same with the
cells and insertCell(), e.g.:

var td = tr.insertCell(-1);

and the cell is appended as the last cell in the row. Feature test of
course, but this stuff is DOM 1 and therefore should be supported
everywhere.

An alternative is to clone an existing row, modify some of the element
attributes appropriately and add that to the table.
 
A

acecraig100

David:

Thank you for replying and your help. I may need more than luck,
obviously have lots to learn.

When I changed the function to the for loop you suggested, it adds the
additional row(s) with no problem and takes up a lot less space. Thank
you. However, it gives the new row the same entry number. I tried
changing the ('value', '1') to ('value', count) but that didn't work
out either. My original thought was that I would add 1 to the end of
each field name such as entry1, entry2, entry3, etc. But maybe that
isn't necessary.

Once the user has added information into the additional rows, how can I
refer to those values so that I can count the total of animals entered?


Amy
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I create a table using the input element? 1
Only one table shows up with the information 2
Reversing output of user input by using while loop... 2
How to add dropdown selected data to table using jquery 2
Add recipes using JavaScript in table 20
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Filter table rows based on multiple checkboxes value 2

Members online

No members online now.
Total: 47 (members: 2, guests: 45)
Robots: 78

Forum statistics

Threads
473,754
Messages
2,569,521
Members
44,995
Latest member
PinupduzSap

Latest Threads

Top