[SOLVED] Getting Values from 5 Textboxes and Adding them to One

[Spyw]

This should be a pretty easy fix. I'm working on a site for a guy and he just has to have an un-editable text box that adds the values from 5 other text boxes into this one that's readonly. I think it's a bit frivolous, but it's his site. My strengths are in PHP and HTML, and I know almost nothing about JavaScript, so I'm not really sure where to go. After reading up on it some, I threw a bit together that should work according to what I'm reading, but doesn't. The JavaScript is all contained in a linked file.

 

function total() {
document.available.total.value = document.available.cards.value + document.available.student.value + document.available.child.value + document.available.car.value + document.available.other.value;
}

 

I have the form named correctly and all of the text boxes are also correct. Here's the HTML.

 

<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		All Credit Cards
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="cards" type="text" disabled onchange="total()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Student Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="student" type="text" disabled onchange="total()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Child Support
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="child" type="text" disabled onchange="total()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Car Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="car" type="text" disabled onchange="total()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Other Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="other" type="text" disabled onchange="total()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		<strong>Total Bills</strong>
	</div>
</td>
<td nowrap="nowrap">
	<font color="#FF0000" size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input type="text" name="total" readonly/>
	</font>
</td>
</tr>

 

You'll probably notice that all 5 of the boxes have a disabled attribute. I wrote another JavaScript function that undisabled them with a checkbox. That tells me that the JavaScript file is correctly linked and that good stuff.

 

Any help would be appreciated. Let me know if I need to extrapolate on anything.

[fenway]

What's not working? Alert each value independently, make sure they're all numreic and what you expect.

[Spyw]

when I put the numbers into the form, nothing happens. It's just supposed to re-add the total and replace the value in the last textbox any time one of the first 5 are changed.

 

I tried setting up some alerts, but something strange happened. First, I put "alert(document.available.cards.value)" in the onchange attribute for the first textbox. I tried it out and it worked fine. I then replaced the entire total() function with the same alert and it didn't work. At least the problem has been narrowed to the function itself, but this is confusing to me. Total is not a word easily misspelled, but I still checked. The only thing I can think is that maybe I'm not defining the function correctly. The entire javascript file is as follows.

 

function enable() {	
if(document.available.optional.checked) {
	document.available.homeaddress.disabled=false;
	document.available.city.disabled=false;
	document.available.state.disabled=false;
	document.available.zip.disabled=false;
	document.available.income.disabled=false;
	document.available.sixmonths.disabled=false;
	document.available.cards.disabled=false;
	document.available.student.disabled=false;
	document.available.child.disabled=false;
	document.available.car.disabled=false;
	document.available.other.disabled=false;
}
else {
	document.available.homeaddress.disabled=true;
	document.available.city.disabled=true;
	document.available.state.disabled=true;
	document.available.zip.disabled=true;
	document.available.income.disabled=true;
	document.available.sixmonths.disabled=true;
	document.available.cards.disabled=true;
	document.available.student.disabled=true;
	document.available.child.disabled=true;
	document.available.car.disabled=true;
	document.available.other.disabled=true;
}
}

function total() {
document.available.total.value = document.available.cards.value + document.available.student.value + document.available.child.value + document.available.car.value + document.available.other.value;
}

 

The first function works flawlessly, but the second doesn't at all. I may be missing some fundamental thing here, but I don't think so.

 

I also tried one other thing. I put the function's contents into the onchange attribute like this:

 

<input name="car" type="text" disabled onchange="document.available.total.value = document.available.cards.value + document.available.student.value + document.available.child.value + document.available.car.value + document.available.other.value"/>

 

That works, except it just combines the values. For example, the first 3 fields are "0", the fourth is "12" and the fifth is "27" outputs 0001227 to the total textbox.

 

So I guess what I need to know now I how to declare all of the variables as numerals so they are actually summed.

[Spyw]

Well good news I guess. I did some more looking on it and found a similar function here:

 

http://javascript.internet.com/forms/auto-sum-form-boxes.html

 

I went off that and rewrote everything. Here's what I ended up with for HTML:

 

<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		All Credit Cards
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="cards" type="text" disabled onChange="sum()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Student Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="student" type="text" disabled onchange="sum()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Child Support
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="child" type="text" disabled onchange="sum()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Car Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="car" type="text" disabled onchange="sum()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		Other Loans
	</div>
</td>
<td nowrap="nowrap">
	<font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input name="other" type="text" disabled onchange="sum()"/>
	</font>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td nowrap="nowrap" class="text">
	<div align="right">
		<strong>Total Bills</strong>
	</div>
</td>
<td nowrap="nowrap">
	<font color="#FF0000" size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
	<input type="text" name="total" value="0" readonly/>
	</font>
</td>
</tr>

 

And this for the JavaScript:

 

function sum() {
var cards = document.available.cards.value;
var student = document.available.student.value;
var child = document.available.child.value;
var car = document.available.car.value;
var other = document.available.other.value;

document.available.total.value = (cards * 1) + (student * 1) + (child * 1) + (car * 1) + (other * 1);
}

 

Thanks for your reply, that got me heading in the right direction.