473,573 Members | 2,958 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

calculations using createElement input text boxes in a table

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>Livestoc k 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.collapseInf o { display: none }
</style>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var count = 2;
function changeDiv(breed s) {
document.getEle mentById('beef' ).style.display = "none";
document.getEle mentById('dairy ').style.displa y = "none";
document.getEle mentById('llama ').style.displa y = "none";
document.getEle mentById('dairy Goat').style.di splay = "none";
document.getEle mentById('boerG oat').style.dis play = "none";
document.getEle mentById('wethe rGoat').style.d isplay = "none";
document.getEle mentById('sheep ').style.displa y = "none";
document.getEle mentById('swine ').style.displa y = "none";
document.getEle mentById(breeds ).style.display = "block";
}
function addExhibit() { //determines where to add new itme in the
options[] array.
var table = document.getEle mentById('exhib it');
var tr = document.create Element('tr');
var td1 = document.create Element('td');
var td2 = document.create Element('td');
var td3 = document.create Element('td');
var td4 = document.create Element('td');
var td5 = document.create Element('td');
var td6 = document.create Element('td');
var td7 = document.create Element('td');
var td8 = document.create Element('td');
var td9 = document.create Element('td');
var inp1 = document.create Element('input' );
var inp2 = document.create Element('input' );
var inp3 = document.create Element('input' );
var inp4 = document.create Element('input' );
var inp5 = document.create Element('input' );
var inp6 = document.create Element('input' );
var inp7 = document.create Element('input' );
var inp8 = document.create Element('input' );
var inp9 = document.create Element('input' );
inp1.setAttribu te("Name", "class" + count);
inp2.setAttribu te("Name", "birthdate" + count);
inp3.setAttribu te("Name", "animalName " + count);
inp4.setAttribu te("Name", "regNumber" + count);
inp5.setAttribu te("Name", "sireName" + count);
inp6.setAttribu te("Name", "sireRegNum ber" + count);
inp7.setAttribu te("Name", "damName" + count);
inp8.setAttribu te("Name", "damRegNumb er" + count);
table.appendChi ld(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.setAttribu te("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="change Div('beef')" /Beef<br />
<input type="radio" name="breed" value="dept2"
onclick="change Div('dairy')" /Dairy<br />
<input type="radio" name="breed" value="dept3"
onclick="change Div('dairyGoat' )" /Dairy Goat<br />
<input type="radio" name="breed" value="dept4"
onclick="change Div('boerGoat') " /Boer Goat<br />
<input type="radio" name="breed" value="dept5"
onclick="change Div('wetherGoat ')" /Jr Wether Goat<br />
<input type="radio" name="breed" value="dept6"
onclick="change Div('llama')" /Llama<br />
<input type="radio" name="breed" value="dept7"
onclick="change Div('sheep')" /Sheep<br />
<input type="radio" name="breed" value="dept8"
onclick="change Div('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>Registratio n No,<br />
Ear Notch Tag Number<br />
or ALSA Number</th>
<th>Name of Sire</th>
<th>Registratio n No,<br />
Ear Notch Tag Number<br />
or ALSA Number of sire</th>
<th>Name of Dam</th>
<th>Registratio n 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="birthdate 1"
value="" /></td>
<td><input type="text" name="animalNam e1"
value="" /></td>
<td><input type="text" name="regNumber 1"
value="" /></td>
<td><input type="text" name="sireName1 "
value="" /></td>
<td><input type="text" name="sireRegNu mber1"
value="" /></td>
<td><input type="text" name="damName1"
value="" /></td>
<td><input type="text" name="damRegNum ber1"
value="" /></td>
</tr>
</tbody>
</table>
<p><input type="button" name="add" value="Add Exhibit"
onclick="addExh ibit();" /></p>
<hr />
<h3>Acceptanc e 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="collapse Info">
<h2><strong>Bee f Fees</strong></h2></p>
<p><strong>Stal l 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="beefTieNu mber" value=""
size="5" /Total Tie Cost: <input type="text" name="beefTieCo st"
value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="beefBeddi ngNumber" value=""
size="5" /Total Bedding Cost: <input type="text"
name="beefBeddi ngCost" 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="gelbviehN umber" value=""
size="5" /Total Gelbvieh Cost: <input type="text"
name="gelbviehC ost" 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="simmental Number" value=""
size="5" /Total Gelbvieh Cost: <input type="text"
name="simmental Cost" size="10" /></p>
<p>Beef Cow/Calf Jackpot ($25.00 per pair)</p>
Cow/Calf Pairs Entered: <input type="text" name="jackpotNu mber"
value="" size="5" /Total Jackpot Cost: <input type="text"
name="jackpotCo st" size="10" /></p>
</div>

<div id="dairy" class="collapse Info">
<h2></h2><strong>Dair y Fees</strong></h2>
<p><strong>Stal l 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="dairyStal lNumber"
value="" size="5" /Total Tie Cost: <input type="text"
name="dairyStal lCost" value="" size="10" /></p>
<p>Bedding Needed: <input type="text" name="dairyBedd ingNumber"
value="" size="5" /Total Bedding Cost: <input type="text"
name="dairyBedd ingCost" value="" size="10" /></p>
</div>

<div id="dairyGoat" class="collapse Info">
<h2><strong>Dai ry Goat Fees</strong></h2>
<p><strong>Pe n 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="dgoatPenN umber" value=""
size="5" /Total Bedding Cost: <input type="text"
name="dgoatPenC ost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="dgoatHead Number" value=""
size="5" /Total Bedding Cost: <input type="text" name="dgoatHead Cost"
value="" size="10" /></p>
</div>

<div id="boerGoat" class="collapse Info">
<h2><strong>Boe r Goat Fees</strong></h2>
<p><strong>Pe n 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="bgoatPenN umber" value=""
size="5" /Total Bedding Cost: <input type="text" name="bgoatPenC ost"
value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="bgoatHead Number" value=""
size="5" /Total Bedding Cost: <input type="text" name="bgoatHead Cost"
value="" size="10" /></p>
</div>
<div id="wetherGoat " class="collapse Info">
<h2><strong>J r. Wethered Goat Fees</strong></h2>
<p><strong>Pe n 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="wgoatPenN umber" value=""
size="5" /Total Bedding Cost: <input type="text"
name="wgoatPenC ost" value="" size="10" /></p>
<p>Goats Fees per head: $1.00 per head</p>
<p>Goats Entered: <input type="text" name="wgoatHead Number" value=""
size="5" /Total Bedding Cost: <input type="text"
name="wgoatHead Cost" value="" size="10" /></p>
</div>

<div id="llama" class="collapse Info">
<h2><strong>Lla ma Fees</strong></h2>
<p><strong>Stal l 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="llamaPenN umber" value=""
size="5" /Total Pen Cost: <input type="text" name="llamaPenC ost"
value="" size="10" /></p>
</div>

<div id="sheep" class="collapse Info">
<h2><strong>She ep Fees</strong></h2>
<p><strong>Pe n 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="sheepPenN umber" value=""
size="5" /Total Pen Cost: <input type="text" name="sheepPenC ost"
value="" size="10" /></p>
<p>Shepherd's Lead ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="shepherdA ge" value="" size="5"
/Shepherd's Lead Cost: <input type="text" name="shepherdC ost"
size="10" /></p>
<p>Decorator' s Class ($7.00 per exhibitor)</p>
Exhibitor Age: <input type="text" name="decorator Age" value="" size="5"
/Shepherd's Lead Cost: <input type="text"
name="decorator Cost" size="10" /></p>
</div>

<div id="swine" class="collapse Info">
<h2><strong>Swi ne Fees</strong></h2>
<p><strong>Pe n 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="swinePenN umber" value=""
size="5" /Total Pen Cost: <input type="text" name="swinePenC ost"
value="" size="10" /></p>
<p>Market Barrow ($10.00 per head)</p>
Market Barrow Heads Entered: <input type="text" name="barrowNum ber"
value="" size="5" /Market Barrow Cost: <input type="text"
name="barrowCos t" size="10" /></p>
<p><input type="button" name="page3" value="Continue to page 3"
onclick="nextFo rm();" /></p>
<p><input type="reset" /></p>
</div>
</form>
</body>
</html>

Dec 5 '06 #1
3 3985

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.getEle mentById('exhib it');
var tr = document.create Element('tr');
var fields = ['class', 'birthdate', 'animalName', 'regNumber',
'sireName', 'sireRegNumber' , 'damName', 'damRegNumber'];
for (var i=0; i<fields.length ; i++) {
var inp = document.create Element('input' );
var td = document.create Element('td');
td.appendChild( inp);
tr.appendChild( td);
if (i===0) inp.setAttribut e('value', '1');
table.appendChi ld(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

David Golightly wrote:
[...]
var table = document.getEle mentById('exhib it');
var tr = document.create Element('tr');
var fields = ['class', 'birthdate', 'animalName', 'regNumber',
'sireName', 'sireRegNumber' , 'damName', 'damRegNumber'];
for (var i=0; i<fields.length ; i++) {
var inp = document.create Element('input' );
var td = document.create Element('td');
td.appendChild( inp);
tr.appendChild( td);
if (i===0) inp.setAttribut e('value', '1');
table.appendChi ld(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.appendChi ld(...) 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
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.getEle mentById('exhib it');
var tr = document.create Element('tr');
var fields = ['class', 'birthdate', 'animalName', 'regNumber',
'sireName', 'sireRegNumber' , 'damName', 'damRegNumber'];
for (var i=0; i<fields.length ; i++) {
var inp = document.create Element('input' );
var td = document.create Element('td');
td.appendChild( inp);
tr.appendChild( td);
if (i===0) inp.setAttribut e('value', '1');
table.appendChi ld(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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1963
by: Joey | last post by:
Say a customer inserts into a sql database field (NUMINSERTS) the number 6. On the following page, I want to build a table that displays 6 input boxes, since the customer said they wanted 6 text boxes. I will then insert the data from the 6 text boxes back into another sql database table. For example:
2
2183
by: thomas | last post by:
This should be pretty simple for you guys. I've been trying to append values to my XML file but I can't get it to work correctly. index.html passes the values of a form to the new_user.asp file and I want it to write my members.xml file. Once the xml file has been written and saved, I coded the ASP file to redirect to google, just to see...
3
5164
by: KathyB | last post by:
Hi, I'm trying to find a way to validate input text boxes where I don't know the names until the page is rendered. I've got 2 validate functions that fire with the onsubmit button of a "mini" form within the html document. When the Finish button is clicked, I need to check for any empty input boxes before loading the next aspx page...but it...
2
42851
by: kie | last post by:
hello, when i create elements and want to assign events to them, i have realised that if the function assigned to that element has no parameters, then the parent node values can be attained. e.g. aTextBox=document.createElement('input'); aTextBox.onchange=calculateOneRow2;
2
2169
by: Ivo | last post by:
I have this code to add a row to a table: var r=document.createElement('tr'); var c=document.createElement('td'); var cn=c.cloneNode(false); cn.className='tdname'; cn.appendChild(document.createTextNode(p)); var c2=c.cloneNode(false); var i=document.createElement('input'); i.type='text'; i.size=8; i.className='itext'; var...
11
2065
by: Mellow Crow | last post by:
I had a problem in IE 6 when trying to insert a table using W3C DOM techniques. I found a solution and share it. :) Initially I had...... ********************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1
2223
by: James Black | last post by:
I am dynamically generating a table in IE to display some information. I will probably change it to divs later, but I just want to get it working properly first. In my div I have the following as the value of innerHTML: "<TABLE> <TR> <TD id=td6x vAlign=top align=right><IMG height=14 alt=Required src=\"/images/ci/icons/required.gif\"...
4
3103
by: sureshl | last post by:
function cal() { var f = document.form1; var regExp_Count = new RegExp("^+$"); f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0); } cal() functions , will calculate as such in that formula n display in the price1 text using the text property onblur,
9
2607
Catalyst159
by: Catalyst159 | last post by:
I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows: Part A: Maximum FAR and Floor Area: Part B: Gross Floor Area of the main floors of the main house: Part C: Gross Floor Area of the basement or cellar: Part D: Gross Floor Area of the attic:
0
7661
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7977
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8165
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8026
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6347
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5252
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3692
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3686
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2163
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.