Custom Field

[Shto]

Here is the script that I am running what it does is takes the info supplied by the database and adds them up. What I am having a problem with is adding a custom field where you can enter in a number such as 100.00 and have that added to the price.



<form name="frmButtons" method="post">
<input type="text" name="txtTotal" readonly>

<td><input type="radio" value="<%=bev_gaspropane%>" name="Rad1" onclick="BtnClick()">Gas/Propane</strong></td>
<td><input type="radio" value="<%=bev_electric%>" name="Rad1" onclick="BtnClick()">Electric</td>
<td><input type="radio" value="<%=bev_doubleburner%>" name="Rad1" onclick="BtnClick()"></td>

<td><input type="radio" value="<%=bev_flushmount%>" name="Rad2" onclick="BtnClick()">Flush Mount</td>
<td><input type="radio" value="<%=bev_bracketmount%>" name="Rad2" onclick="BtnClick()">Bracket Mount</td>
<td><input type="radio" value="<%=bev_gooseneck%>" name="Rad2" onclick="BtnClick()">Gooseneck</td>
</form>
<script language="javascript">
function BtnClick(){
var oForm = document.frmButtons;
var total = parseFloat(getValue(oForm, "Rad1")) + parseFloat(getValue(oForm, "Rad2"));
oForm.txtTotal.value = "$" + total;
}
function getValue(oForm, sRadioName){
for(var i=0; i<oForm.elements.length; i++){
if(oForm.elements[i].name == sRadioName){
if(oForm.elements[i].checked){ return oForm.elements[i].value; }
}
}
}
</script>

[Phil Karras]

Here are the changes I made to your function:

function BtnClick(){

var oForm = document.frmButtons;

var total = 0.0;
if(getValue(oForm, "Rad1")) { // Add #1 if there is #1
total += parseFloat(getValue(oForm, "Rad1"));
}
if(getValue(oForm, "Rad2")) { // Add #2 if there is #2
total += parseFloat(getValue(oForm, "Rad2"));
}

total += oForm.More.value/1; // Now add the extra money

oForm.txtTotal.value = "$" + total;

}


Now, in your form I simply added something like:

<form name="frmButtons" method="post">
<input type="text" name="txtTotal" readonly>

<td><input type="radio" value="25" name="Rad1" onclick="BtnClick()">Gas/Propane</strong></td>
<td><input type="radio" value="35" name="Rad1" onclick="BtnClick()">Electric</td>
<td><input type="radio" value="45" name="Rad1" onclick="BtnClick()"></td>

<td><input type="radio" value="21" name="Rad2" onclick="BtnClick()">Flush Mount</td>
<td><input type="radio" value="31" name="Rad2" onclick="BtnClick()">Bracket Mount</td>
<td><input type="radio" value="41" name="Rad2" onclick="BtnClick()">Gooseneck</td>
<br>

Add some money: <input type='text' name='More' value='' />

</form>


(Notice that I added actual numeric values in your clicks since I didn't have a PHP or other server-side script adding those values in.)

Hope that helps.

[Shto]

Thanks for the info. I see what you are saying but I can not seem to get it to work right. When it is added I don't get anything in the output field. Not even an error. I am not sure what I am doing wrong.

[Phil Karras]

If you're not even getting an error then either you do not have
the error messages set up to fire automatically or there is a
logic error but no sytax error.

You can read the following article(s) on debugging:
Hints: Turning on Error Messages (mgm)
http://www.jsworkshop.com/bb/viewtopic.php?t=143
This is on a different site but I wrote most of them and I don't
feel like duplicating effort.

Other than that you'll need to post a "working" buggy version
here so we can see what you're doing wrong. Please make it
as short & simple as possible.

[Shto]

Orange is what it says the error is. This is from your script before. I used it to replace the one that is running now the one I have posted but it came up with that error.

<script language="javascript">
function BtnClick(){
var oForm = document.frmButtons;

var total = 0.0;
if(getValue(oForm, "Rad1")) { // Add #1 if there is #1
total += parseFloat(getValue(oForm, "Rad1"));
}
if(getValue(oForm, "Rad2")) { // Add #2 if there is #2
total += parseFloat(getValue(oForm, "Rad2"));
}

total += oForm.More.value/1; // Now add the extra money

oForm.txtTotal.value = "$" + total;

}
</script>

[Phil Karras]

Orange is what it says the error is.


What was the error? It works here just fine so you're probably doing something wrong on the HTML side at this point. Is there a real value coming back from Rad1 or is it "undefined" ?

If undefined you'll need to find out why the HTML is not right - which leads to no numeric values.

[Shto]

If the page is written just like this it gives me a
A runtime error has occurred.
Line: 31
Error: Object Expected
At this point I click on debug and it points to:
if(getValue(oForm, "Rad1"))

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form name="frmButtons" method="post">
<input type="text" name="txtTotal" readonly>

<td><input type="radio" value="25" name="Rad1" onclick="BtnClick()">Gas/Propane</strong></td>
<td><input type="radio" value="35" name="Rad1" onclick="BtnClick()">Electric</td>
<td><input type="radio" value="45" name="Rad1" onclick="BtnClick()"></td>

<td><input type="radio" value="21" name="Rad2" onclick="BtnClick()">Flush Mount</td>
<td><input type="radio" value="31" name="Rad2" onclick="BtnClick()">Bracket Mount</td>
<td><input type="radio" value="41" name="Rad2" onclick="BtnClick()">Gooseneck</td>
<br>

Add some money: <input type='text' name='More' value='' />

</form>

<script language="javascript">
function BtnClick(){

var oForm = document.frmButtons;

var total = 0.0;
if(getValue(oForm, "Rad1")) { // Add #1 if there is #1
total += parseFloat(getValue(oForm, "Rad1"));
}
if(getValue(oForm, "Rad2")) { // Add #2 if there is #2
total += parseFloat(getValue(oForm, "Rad2"));
}

total += oForm.More.value/1; // Now add the extra money

oForm.txtTotal.value = "$" + total;

}
</script>
</body>
</html>

[Phil Karras]

Error: Object Expected
At this point I click on debug and it points to:
if(getValue(oForm, "Rad1"))

Have you read my articles on debugging? This means you have an object
that is not yet defined. You think you have it defined but JS doesn't
and it is now up to you to find out which object it is.

My version, with the numbers put in by hand, works just fine here.

//If you put:
<script>alert(document.frmButtons.Rad1);</script>
//before the line:
<input type="radio" value="BtnClick()" name="Rad1" onclick="BtnClick()" />Wood
//you get: "undefined" ie, it is not yet an object
//on the other hand, putting the same line AFTER it gives: object

//Also, using:

var oForm = document.frmButtons;
alert(oForm);

//give: object here, what do you get?