PDA

Click to See Complete Forum and Search --> : Summing Fields Problem

rjusa
11-05-2003, 10:57 AM
I have the following:

<html>
<head>

<script language="JavaScript"><!--
function sum(objRef) {
var result = 0;
result =+ document.percent1.value - 0;
result =+ document.percent2.value - 0;
result =+ document.percent3.value - 0;
result =+ document.percent4.value - 0;
alert(result);
}
//--></script></head>

<body>

<form>
<input type="text" name="percent1" value="" size="20">percent1</p>
<p><input type="text" name="percent2" value="" size="20">percent2</p>
<p><input type="text" name="percent3" value="" size="20">percent3</p>
<p><input type="text" name="percent4" value="" size="20">percent4</p>
</form>

<input type="button" value="Sum" onClick="sum(this.form)">
</form>
</body>

</html>

Why can't I get the result to come up when I submit?
fredmv
11-05-2003, 11:11 AM
Here are the two main reasons your script isn't working as expected: You're not accessing the fields correctly through the DOM (Document Object Model). The general way to access a field is document.formName.fieldName. However, you only have document.fieldName which won't work correctly.
You're also using an operator that doesn't exist in JavaScript. The one you're looking for is += as opposed to =+. You just had it backwards.


Change the function to this and it should work perfectly:function sum(objRef) {
var result = 0;
result += document.forms[0].percent1.value - 0;
result += document.forms[0].percent2.value - 0;
result += document.forms[0].percent3.value - 0;
result += document.forms[0].percent4.value - 0;
alert(result);
}I hope that helps you out. :cool:
rjusa
11-05-2003, 11:21 AM
works great, thanks! If I want the window to give me the result if the value exceeds 100 or a message if it doesn't I tried the following

if (result > 100)
alert(result);
else alert(good job!);

didn't work..thoughts?

Thanks again,
Ron
fredmv
11-05-2003, 11:26 AM
You're very welcome, Ron. Well, from what I can see in your example code, you're simply missing the quotes around the alert string:if (result > 100)
alert(result);
else alert("good job!");Try correcting that and see what happens. ;)
rjusa
11-05-2003, 11:38 AM
Good catch...went to bed at 1AM & got up at 4:30...little spacy! While I've got you, as I toggle through each percent field, how can I get the

if (result > 100)
alert("Your allocation exceeds 100%, please check your distribution");

to trigger? onBlur maybe but if so, how to code?

Thanks again much,
Ron
fredmv
11-05-2003, 11:50 AM
No problem. Add this somewhere in your JavaScript (outside of your function, however). It will loop through all of your form elements that are text and assign an event handler with a annonymous function. Here it is:for( i=0; i<document.forms[0].elements.length )
{
if( document.forms[0].elements[i].type == "text" )
{
document.forms[0].elements[i].onblur = function()
{
if (result > 100) alert("Your allocation exceeds 100%, please check your distribution");
}
}
}I hope that helps you out.
rjusa
11-05-2003, 12:03 PM
Having only had 3 1/2 hrs sleep I'm thinking like my blonde wife (yuk, yuk... joke only...don't tell her I said this!)...won't this code take an element, e.g., like a phone number or zip code, and include it in the percent calculation?
fredmv
11-05-2003, 12:06 PM
The code in my previous post goes through every element with its type attribute set to text and assigns on onblur event handler that will alert if the total of the values are greater than 100.
rjusa
11-05-2003, 12:25 PM
Well it's too bad your not playing professional sports cause batting 1000% would obviously make you a very rich individual! ...you're awesome...maybe you guessed this but I've been "stepping" into what would be my final goal that isn't exactly straightforward. Here's what I mean...parent form has the first percent allocation and if the applicant is crazy enough to type in a number > 100 the onBlur event alerts him/her to this boo-boo...life is good...when I branch into the child windows can I just reference the child window percent with the forms[0] percent and use the same type of onBlur event...obviously carry out the same logic for the next 2 childs...being a little "whippy" with marginal sleep this seems to make sense but don't want to start coding without an opinion..

Thanks,
Ron
fredmv
11-05-2003, 12:30 PM
No problem Ron. :cool:
rjusa
11-05-2003, 01:43 PM
I thought I had this licked..obviously not!...in the child form I have:

<script language="JavaScript"><!--
function sum(objRef) {
var result = 0;
result += document.forms[0].CndnFBpc.value - 0;
result += document.childForm1.cf1f.value - 0;

if (result > 100)
alert("Your allocation exceeds 100%, please check your distribution");
}//--></script>

and

<input type="text" name="cf1f" value="" size="26" onBlur="sum(this)" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt">

when I input in the parent a number like 60 and in the child 70, nothing happens...any thoughts?

Thanks,
Ron
fredmv
11-05-2003, 01:48 PM
onblur="sum(this.value)"
rjusa
11-05-2003, 02:11 PM
Unforunately, no luck...drat!
fredmv
11-05-2003, 02:12 PM
Could I possibly see all of the code you were using?
rjusa
11-05-2003, 02:18 PM
form the child:

<html>

<head><base href='http://hamptoninsurance.comBeneficiary2.html' />
</head>

<script LANGUAGE="JavaScript"><!--
function updateParent(childForm1) {

if (childForm1.cf1a[0].checked == childForm1.cf1a[1].checked) {
alert("Irrevocable Y/N is required")

return false
}

if (childForm1.cf1b.value == "") {
alert("First Name is required")
childForm1.cf1b.focus()
return false
}
if (childForm1.cf1c.value == ""){
alert("Last Name is required")
childForm1.cf1c.focus();
return false
}
if (childForm1.cf1d.value == "") {
alert("Relationship is required")
childForm1.cf1d.focus();
return false
}


opener.document.forms[0].CndnSBFirstName.value = document.childForm1.cf1b.value;
opener.document.forms[0].CndnSBLastName.value = document.childForm1.cf1c.value;
opener.document.forms[0].CndnSBRel.value = document.childForm1.cf1d.value;
opener.document.forms[0].CndnSBpc.value = document.childForm1.cf1f.value;
opener.document.forms[0].CndnSBSS.value = document.childForm1.cf1e.value;
if (document.childForm1.cf1a[0].checked)
opener.document.forms[0].CndnSBIrr[0].checked=true;
if (document.childForm1.cf1a[1].checked)
opener.document.forms[0].CndnSBIrr[1].checked=true;
self.close();
return false;


}
//--></SCRIPT>

<script language="JavaScript"><!--
function sum(objRef) {
var result = 0;
result += document.forms[0].CndnFBpc.value - 0;
result += document.childForm1.cf1f.value - 0;

if (result > 100)
alert("Your allocation exceeds 100%, please check your distribution");
}//--></script></head>

<body style="font-family: Arial; font-size: 10pt">
<form name="childForm1" onSubmit="return updateParent(this);">

<p>
<font face="Arial" size="3" color="#000000">
<b>3a.&nbsp;(con't)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Beneficiary Information</span>
- Second</b></font></p>

<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber4">

<tr>
<td width="44%">
<font face="Arial" size="2" color="#FF0000">Second Beneficiary irrevocable?</font></td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="radio" name="cf1a" value="Yes" $cf1a_Yes_checked$></font><font size="2" face="Arial">Yes&nbsp; </font>
<font face="Arial" size="3" color="#C0C0C0">
<input type="radio" name="cf1a" value="No" $cf1a_No_checked$></font><font size="2" face="Arial">No</font></font></td>
</tr>

<tr>
<td width="44%">
<font size="3" color="#000000">
<font face="Arial" size="2" color="#FF0000">First Name</span>
</font> </td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="text" name="cf1b" value="" size="26" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt"></font></td>
</tr>

<tr>
<td width="44%">
<font face="Arial" size="2" color="#FF0000">Last Name</span>
</font> </td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="text" name="cf1c" value="" size="26" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt"></font></td>
</tr>

<tr>
<td width="44%">
<font face="Arial" size="2" color="#FF0000">Relationship</font></td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="text" name="cf1d" value="" size="26" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt"></font></td>
</tr>

<tr>
<td width="44%">
<font face="Arial" size="2">Percent</font></td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="text" name="cf1f" value="" size="26" onBlur="sum(this.value)" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt"></font></td>
</tr>

<tr>
<td width="44%">
<font face="Arial" size="2">Social Security Number</font></td>
<td width="12%" colspan="2">
<font face="Arial" size="3" color="#C0C0C0">
<input type="text" name="cf1e" value="" size="26" style="border: 1px solid #C0C0C0; font-family:Arial; font-size:10pt"></font></td>
</tr>

</table>

<br>
<input TYPE="SUBMIT" VALUE="Update">

</form></body></html>