Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Extract Form Data, Compute Total, and Return Total to Form 1

Status
Not open for further replies.
megp

megp

Programmer
Aug 25, 2004
31
US
I'm new to JavaScript and have managed to make unnecessarily complicated what should be a terribly simple script. I need to use the value of two drop-down boxes as variables in an equation, then return the total to another text box. As it is, nothing is returned to the total text box, and I don't get any error message. What am I doing wrong? Thanks in advance...

Code: 
<script language="JavaScript">
<!-- Hide from old browsers
var x = document.form.couples.value;
var y = document.form.individuals.value;
var z = ((x*75)+(y*40))
function total()
{document.form.total.value(z)}
-->
</script>

	<tr>
		<td class="l"><select name="couples">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Couples ($75 per couple)</td>
	</tr>
	<tr>
		<td class="l"><select name="individuals">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Individuals ($40 per person)</td>
	</tr>
	<tr>
		<td class="l">Total Amount Due</td>
		<td class="r">$<input type="text" name="total" onChange="total();" readonly="readonly"></td>
	</tr>

**Note the form name is "form
 
Sort by date Sort by votes
You are working out x and y before calling total - and possibly before the form is even rendered.

Move the variable declarations into the function. I would also recommend not calling your form name "form" - AFAIK it is a reserved word, and could cause issues. I would also change your form element access syntax from this:

Code: 
document.formName.elementName

to this:

Code: 
document.forms['formName'].elements['elementName']

Hope this helps,
Dan
 
Upvote 0 Downvote
Thanks, Dan, I appreciate the help. Hopefully you're a patient person who won't mind me hanging my ignorance out for everyone to see.

Based on your earlier response, I now have this, exactly as it appears, and in the order it appears. The script is within my form. I've tried it at the beginning of the body, just after the close of the form, in the head, and it just won't work.

Code: 
<script language="JavaScript">
function total()
{
var x = document.forms['rez'].elements['couples'].value;
var y = document.forms['rez'].elements['individuals'].value;
var z = ((x*75)+(y*40))
{document.forms['rez'].elements['total'].value(z);
}
</script>

	<tr>
		<td class="l"><select name="couples">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Couples ($75 per couple)</td>
	</tr>
	<tr>
		<td class="l"><select name="individuals">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Individuals ($40 per person)</td>
	</tr>

	<tr>
		<td class="l">Total Amount Due</td>
		<td class="r">$<input type="text" name="total" onChange="total();" readonly="readonly"></td>
 
Upvote 0 Downvote

You're almost there - just one or two minor errors. Try this for your function code:

Code: 
function total() {
	var x = document.forms['rez'].elements['couples'].value;
	var y = document.forms['rez'].elements['individuals'].value;
	var z = ((x*75)+(y*40))
	document.forms['rez'].elements['total'].value = z;
}

At the moment, no validation is being done to make sure the entries are numeric, but this is an easy thing to add should you wish.

Hope this helps,
Dan
 
Upvote 0 Downvote
Dan,

Thank you again. I'm so frustrated I can't see straight. My script is as you wrote it above (contained within script tags, of course), but I still get no output in my total field. Am I calling it correctly? Using the correct event handler? Do I need a "write" in there?

Code: 
<td class="l">Total Amount Due</td>
<td class="r">$<input type="text" name="total" onChange="total();" readonly="readonly" style="color:#222222;border:0px;"></td>

Get me through this and I'll name my firstborn for you!
Meghan
 
Upvote 0 Downvote

It looks like you're calling it correctly, yes. Can you post the complete page source - there may be something else conflicting on the page that we don't know about.

Dan
 
Upvote 0 Downvote
You may be sorry you asked, but...

Code: 
<html>
<head>
<title>The 3rd Annual Vineyard of Hope Wine Tasting &amp; Auction Reservations</title>
<meta name="description" content="The Vineyard of Hope is the primary annual fundraiser for Catholic Social Services through which we support our community outreach beyond that provided by Charlotte's Catholic parishes.">
<meta name="keywords" content="vineyard of hope, catholic social services, fundraiser, charlotte, nc, NC, north carolina, wine tasting, auction, css, CSS">
<meta http-equiv="pragma" content="nocache">
<link rel="shortcut icon" href="grapes.ico"></link>
<link rel="stylesheet" type="text/css" href="voh.css"></link>
<script language="JavaScript" src="win_pop.js"></script>
</head>
<body class="in">
<div id="llng">
</div>
<div id="l1txt">
<span class="smc">Additional Information</span><br>
<br>
<a href="index.html" class="css">Home</a>
<br>
<br>
<a href="#" class="css" onClick="goNewWin()">Location &amp; Parking Information</a>
<br>
<br>
<a href="sponsor.html" class="css">Sponsorship Opportunities</a> 
<br>
<br>
<a href="2003.html" class="css">Vineyard of Hope & Catholic Social Services</a>
<br>
<br>
<a href="[URL unfurl="true"]http://www.cssnc.org"[/URL] target="_blank" class="css">Charlotte Regional Office of Catholic Social Services</a>
</div>
<div id="ctr">
<img src="logo.gif"></img><br>
<br>
<br>
<br>
<span class="smc">Reservation Requests</span><br><br>
Please complete the following information to reserve your tickets for the 2004 Vineyard of Hope Wine Tasting and Auction.<br>
<br>
RSVP by Friday, October 22, 2004.<br>
<br>
<form action="[URL unfurl="true"]http://www.vineyardofhope.com/cgi-bin/reservations.cgi"[/URL] method="post" name="rez">
<table>
	<tr>
		<td class="l">Name</td>
		<td class="r"><input name="name" type="text" size="40"></td>
	</tr>
	<tr>
		<td class="l">Address 1</td>
		<td class="r"><input name="add1" type="text" size="40"></td>
	</tr>
	<tr>
		<td class="l">Address 2</td>
		<td class="r"><input name="add2" type="text" size="40"></td>
	</tr>
	<tr>
		<td class="l">City, State Zip</td>
		<td class="r"><input name="city_state_zip" type="text" size="40"></td>
	</tr>
	<tr>
		<td class="l">Daytime Telephone</td>
		<td class="r"><input name="daytime_phone" type="text" size="40"></td>
	</tr>
	<tr>
		<td class="l">Email Address</td>
		<td class="r"><input name="email" type="text" size="40"></td>
	</tr>

<script language="JavaScript">
function total()
{
var x = document.forms['rez'].elements['couples'].value;
var y = document.forms['rez'].elements['individuals'].value;
var z = ((x*75)+(y*40))
document.forms['rez'].elements['total'].value = z;
}
</script>

	<tr>
		<td class="l"><select name="couples">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Couples ($75 per couple)</td>
	</tr>
	<tr>
		<td class="l"><select name="individuals">
		<option value="" selected>Select #</option>
		<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>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select></td>
		<td class="r">Individuals ($40 per person)</td>
	</tr>

	<tr>
		<td class="l">Total Amount Due</td>
		<td class="r">$<input type="text" name="total" onChange="total();" readonly="readonly" style="color:#222222;border:0px;"></td>
	</tr>
	<tr>
		<td colspan="2">Payment Options (Select One):</td>
	</tr>
	<tr>
		<td class="l"> <input type="radio" name="payment" value="credit_card"></td> 
		<td class="r"> I would like to pay by credit card.  Please contact me for card number.</td>
	</tr>
	<tr>
		<td class="l"> <input type="radio" name="payment" value="check"></td>
		<td class="r"> I would like to pay by check.<br>After you submit your registration, you will receive a confirmation email.  Print the email and mail with your check to:<br><blockquote>Catholic Social Services<br>Attn:  Sherry Luc <br> 1123 South Church Street<br>Charlotte, NC  28203</blockquote></td>
	</tr>

	<tr>
		<td class="l"></td>
		<td class="r"><input type="reset" value="Clear Form"> &nbsp; &nbsp; &nbsp; &nbsp;
<input type="submit" value="Submit Form"></td>
	</tr>
</table>
<input type="hidden" name="jmail" value="mailto:joyceb@vineyardofhope.com">
<input type="hidden" name="voh" value="Vineyard of Hope">
<input type="hidden" name="mmail" value="mailto:mpaladino@availresources.com">
</form>
</div>
<div id="rlng">
</div>
<div id="r1txt">
<center>
<span class="smc">Event Information</span><br>
<br>
The 3rd Annual<br>
Vineyard of Hope<br>
Wine Tasting and Auction<br>
<br>
Honoring<br>
The Most Reverend<br>
William G. Curlin,<br>
Bishop Emeritus<br>
<br>
<br>
Friday, October 29, 2004<br>
7:00 p.m.<br>
The Wachovia Atrium<br>
Two Wachovia Center<br>
301 South Tryon Street<br>
Charlotte, North Carolina<br>
<br>
<br>
Enter parking garage at corner of 2nd and College Streets.  Parking ticket validated at the event.<br>
<br>
<br>
$40 individual tickets<br>
$75 per couple<br>
<br>
<br>
Wine tasting, heavy hors d'oeuvres<br>
</center>
</div>
<!-- <a href="index.html"><img class="g" src="grapes.gif" alt="Vineyard of Hope"></img></a>
<a href="[URL unfurl="true"]http://www.cssnc.org"[/URL] target="_blank"><img class="d" src="dove.gif" alt="Catholic Social Services"></img></a> -->
</body>
</html>

Meghan
 
Upvote 0 Downvote

OK - I missed the obvious - and the not-so obvious ;o)

The onchange event should be on both of the select boxes, not on the text box. So move the whole "onChange" bit from the text box, and add it into both select boxes.

That was the obvious bit ;o)

The not-so obvious bit - it looks like IE has trouble when function names have the same name as element names. If you rename the function to "doTotals" and update the onChange references, it all starts working.

Hope this helps,
Dan
 
Upvote 0 Downvote
Dan,

You are a lifesaver! It works perfectly now. Thank you so much for your time and insight.

Meghan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
823
lexer
lexer
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
751
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
944
xwb
xwb
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
845
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top