By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,663 Members | 2,157 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,663 IT Pros & Developers. It's quick & easy.

calculations using createElement input text boxes in a table

P: n/a
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 <divfrom 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.displa y = "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>

Dec 5 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a

ac*********@cox.net wrote:
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.
Happy to help - but first of all, you want to learn about doing "for"
loops in JavaScript. Your entire addExhibit function can be condensed
into:

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);
count++;
}

It's really a headache to look at "for" loops written out like that.
I also have the form set up to only show the <divfrom 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.
I'm afraid I don't really understand your question here.
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?
You should decide on this by making a static HTML page and use CSS to
make it look like you want. You probably don't want to vary the cell
width with the content, because it will mess with the rest of the
layout on your page.

Good luck,

David

Dec 6 '06 #2

P: n/a

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);
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.
--
Rob

Dec 6 '06 #3

P: n/a
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

David Golightly wrote:
Happy to help - but first of all, you want to learn about doing "for"
loops in JavaScript. Your entire addExhibit function can be condensed
into:

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);
count++;
}
You should decide on this by making a static HTML page and use CSS to
make it look like you want. You probably don't want to vary the cell
width with the content, because it will mess with the rest of the
layout on your page.

Good luck,

David
Dec 6 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.