...

View Full Version : variable undefined error in replace function



billthecat
07-23-2009, 03:48 PM
Hello,

I've written a function to format a number. It strips dollar signs and commas, converts to a number, and sets the number to two decimal places.

However, I get the error message "amountNum is undefined". It occurs right where I use the replace command.



function formatAmount(value) {
var amountNum;
amountNum = value;
amountNum = amountNum.replace("$", "")
amountNum = amountNum.replace(",", "")
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
return (amountNum);
}


I am calling the function with this line of code:


document.myForm.Amount.value =formatAmount(document.myForm.Amount.value);


Can anyone help?

Bill

Kor
07-23-2009, 04:03 PM
It works for me:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function formatAmount(value) {
var amountNum;
amountNum = value;
amountNum = amountNum.replace("$", "")
amountNum = amountNum.replace(",", "")
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
return (amountNum);
}

</script>

</head>
<body>
<form action="">
<input type="text" onblur="this.value=formatAmount(this.value)">
</form>


</body>
</html>

Amphiluke
07-23-2009, 04:04 PM
You are using replace method with illegal parameters.
Try this:

function formatAmount(value) {
re = /[\$,]/g;
var amountNum = value.replace(re, "");
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
return (amountNum);
}

A1ien51
07-23-2009, 04:14 PM
You are using replace method with illegal parameters.


illegal paramters? You can use a string, you do not have to use a regular expression.

Eric

Amphiluke
07-23-2009, 04:21 PM
I beg your pardon. Actually, both choices are allowed. https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace.

A1ien51
07-23-2009, 04:31 PM
I know that both are allowed, I never said they were not allowed. You made it seem like in your original post that it is illegal to use a string.

Eric

billthecat
07-23-2009, 04:36 PM
Thanks Amphiluke.

I've changed the function to this:
[CODE]
function formatAmount(value) {
re = /[\$,]/g;
var amountNum = value.replace(re, "");
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
return (amountNum);
}
[CODE]

But I'm now getting the error "value is undefined" for this line of code:
[CODE]
var amountNum = value.replace(re, "");
[CODE]

This is very strange.

Amphiluke
07-23-2009, 04:47 PM
Perhaps, this means that you pass invalid value to the formatAmount function.
Check it in such a way:

alert(document.myForm.Amount.value);

In addition, try to get the pointer to the form with getElementById method instead.

var _amount = document.getElementById("form_Id").Amount;
_amount.value =formatAmount(_amount.value);

A1ien51
07-23-2009, 04:52 PM
Sounds like you have an issue with document.myForm.Amount.value

Eric

billthecat
07-23-2009, 05:48 PM
I've entered the number 5 in the Amount field and submitted
[CODE]
alert(document.myForm.Amount.value);
[CODE]
I get an alert box with the number 5.

Not certain of how the pointer syntax should work. All of the below produce "is null" errors:
[CODE]
var _amount = document.getElementById("Amount").Amount;
var _amount = document.getElementById("Amount");
var _amount = document.getElementById("form_Id").Amount;
var _amount = document.getElementById("myForm").Amount;
[CODE]

Amphiluke
07-23-2009, 06:02 PM
Look. Let us assume that this is your form:

<form action="#" id="form_Id_here">
<input type="text" name="Amount" />
</form>

Then, you can get a pointer to the form in such a way:

var _form = document.getElementById("form_Id_here");
var _amount = _form.Amount;
_amount.value = formatAmount(_amount.value);

Though, if alert shows a correct value then this is not a reason for bugs... Is it possible for us to see the entire code?

billthecat
07-23-2009, 06:23 PM
The name of my form is "myForm". When I apply this code:

[CODE]
var _form = document.getElementById("myForm");
var _amount = _form.Amount;
_amount.value = formatAmount(_amount.value);
[CODE]

I get the error message:
"_form is null"

Amphiluke
07-23-2009, 06:27 PM
The getElementById treats only id attribute, but not name.

<form action="#" id="myForm" name="myForm">
<input type="text" name="Amount" />
</form>

Will you please post the entire code?

billthecat
07-23-2009, 08:20 PM
Certainly. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1" ?>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
function showHide() {
var whatGift_Type = getCheckedValue(document['myForm'].elements['Gift_Type'])
if (whatGift_Type=="I want to make a new pledge with this gift as the first payment") {
document.getElementById('multiYearPledgeArea').style.display = 'block';
updatePledgeSentence();
} else if (whatGift_Type=="This is a one-time gift"){
document.getElementById('multiYearPledgeArea').style.display = 'none';
} else {
document.getElementById('multiYearPledgeArea').style.display = 'none';
}
}

function formatAmount(value) {
var amountNum;
amountNum = value;
amountNum = amountNum.replace("$", "") // "amountNum is undefined" error here
amountNum = amountNum.replace(",", "")
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
}

function updatePledgeSentence() {
document.myForm.Amount.value =formatAmount(document.myForm.Amount.value);
document.myForm.Pledge_Amount.value="I pledge $" + document.myForm.Amount.value + " annually until:"
}

function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}


function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Please verify your email address")
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Please verify your email address")
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Please verify your email address")
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert("Please verify your email address")
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Please verify your email address")
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert("Please verify your email address")
return false
}

if (str.indexOf(" ")!=-1){
alert("Please verify your email address")
return false
}

return true
}

function validate(theForm){
if (theForm.First_Name.value == "")
{
alert("Please enter a value for the \"First Name\" field.");
theForm.First_Name.focus();
return (false);
}
if (theForm.Last_Name.value == "")
{
alert("Please enter a value for the \"Last Name\" field.");
theForm.Last_Name.focus();
return (false);
}


if (theForm.Amount.value == "")
{
alert("Please enter an amount.");
theForm.Amount.focus();
return (false);
}

formatAmount();

if (theForm.Amount.value < 5.00)
{
alert("Sorry, the minimum amount is $5.00")
theForm.Amount.focus();
return (false);
}

var whatGift_Type = getCheckedValue(document['myForm'].elements['Gift_Type'])

if (whatGift_Type=="") {
alert("Please select either \"This is a one-time gift \" or \"I want to make a new pledge with this gift as the first payment\" ");
return (false);
}

if (theForm.Billing_Address.value == "")
{
alert("Please enter a value for the \"Billing Address\" field.");
theForm.Billing_Address.focus();
return (false);
}
if (theForm.Billing_City.value == "")
{
alert("Please enter a value for the \"Billing City\" field.");
theForm.Billing_City.focus();
return (false);
}
if (theForm.Billing_State.value == "")
{
alert("Please enter a value for the \"Billing State\" field.");
theForm.Billing_State.focus();
return (false);
}
if (theForm.Billing_Zip.value == "")
{
alert("Please enter a value for the \"Billing Zip\" field.");
theForm.Billing_Zip.focus();
return (false);
}
if (theForm.Email.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.Email.focus();
return (false);
}

if (echeck(theForm.Email.value)==false){
theForm.Email.focus();
return (false);
}



return (true);
}
</script>
</head>
<body onLoad="showHide();">
<form action="formSubmit.asp" method="post" name="myForm" id="myForm" onSubmit="return validate(this)">
<em> * Required fields</em>
<table width="700" border="0">
<tr>
<th scope="row" width="150">*First Name</th>
<td><input name="First_Name" size="23"></td>
</tr>
<tr>
<th scope="row">*Last Name</th>
<td><input name="Last_Name" size="23"></td>
</tr>
<tr>
<th scope="row">School/Department</th>
<td><select name="Constituent_Type" id="Constituent_Type">
<option value="1st_option">1st_option</option>
<option value="2nd_option">2nd_option</option>
</select></td>
</tr>
<tr>
<th scope="row">Amount</th>
<td><input name="Amount" type="text" onChange="updatePledgeSentence();" /></td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td><input name="Gift_Type" type="radio" value="This is a one-time gift" onClick="showHide();" />
This is a one-time gift <br />
<input name="Gift_Type" type="radio" value="I want to make a new pledge with this gift as the first payment" onClick="showHide();" />
I want to make a new pledge with this gift as the first payment <br />
<span id="multiYearPledgeArea" name="multiYearPledgeArea" style="display:none">
<table>
<tr>
<td rowspan="2"><input name="Pledge_Amount" type="text" id="Pledge_Amount" size="30" class="dis" onFocus="blur();" />
<select name="Pledge_End_Date" id="Pledge_End_Date">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013" selected="selected">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select></td>
</tr>
</table>
</span></td>
</tr>
<tr>
<th scope="row">Designate my gift/pledge to support:</th>
<td><select name="Description" id="Description">
<option value="OptionA">OptionA</option>
<option value="OptionB">OptionB</option>
</select></td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="TARGET" id="TARGET" /></th>
<td>Checkbox text here</td>
</tr>
<tr>
<th scope="row">*Billing Address</th>
<td><input name="Billing_Address" type="text" /></td>
</tr>
<tr>
<th scope="row">*Billing City</th>
<td><input name="Billing_City" type="text" /></td>
</tr>
<tr>
<th scope="row">*Billing State</th>
<td><input name="Billing_State" type="text" size="2" maxlength="2" /></td>
</tr>
<tr>
<th scope="row">*Billing Zip</th>
<td><input name="Billing_Zip" type="text" /></td>
</tr>
<tr>
<th scope="row">*Email</th>
<td><input name="Email" type="text" /></td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td><input type="submit" name="submit" value="Next"/></td>
</tr>
</table>
</form>
</body>
</html>

Amphiluke
07-23-2009, 08:43 PM
theForm.Amount.focus();
return (false);
}

formatAmount();

if (theForm.Amount.value < 5.00)

You've call the function with no parameters... This implyies the error like "value is undefined".
I have corrected that a little bit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1" ?>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
function showHide() {
var whatGift_Type = getCheckedValue(document['myForm'].elements['Gift_Type'])
if (whatGift_Type=="I want to make a new pledge with this gift as the first payment") {
document.getElementById('multiYearPledgeArea').style.display = 'block';
updatePledgeSentence();
} else if (whatGift_Type=="This is a one-time gift"){
document.getElementById('multiYearPledgeArea').style.display = 'none';
} else {
document.getElementById('multiYearPledgeArea').style.display = 'none';
}
}

function formatAmount(value) {
var amountNum;
amountNum = value;
amountNum = amountNum.replace("$", "") // "amountNum is undefined" error here
amountNum = amountNum.replace(",", "")
amountNum = Number(amountNum);
amountNum =amountNum.toFixed(2);
return amountNum;
}

function updatePledgeSentence() {
var _form = document.getElementById("myForm");
_form.Amount.value =formatAmount(_form.Amount.value);
_form.Pledge_Amount.value="I pledge $" + _form.Amount.value + " annually until:"
}

function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}


function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Please verify your email address")
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Please verify your email address")
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Please verify your email address")
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert("Please verify your email address")
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Please verify your email address")
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert("Please verify your email address")
return false
}

if (str.indexOf(" ")!=-1){
alert("Please verify your email address")
return false
}

return true
}

function validate(theForm){
if (theForm.First_Name.value == "")
{
alert("Please enter a value for the \"First Name\" field.");
theForm.First_Name.focus();
return (false);
}
if (theForm.Last_Name.value == "")
{
alert("Please enter a value for the \"Last Name\" field.");
theForm.Last_Name.focus();
return (false);
}


if (theForm.Amount.value == "")
{
alert("Please enter an amount.");
theForm.Amount.focus();
return (false);
}

formatAmount(theForm.Amount.value);

if (parseFloat(theForm.Amount.value) < 5.00)
{
alert("Sorry, the minimum amount is $5.00")
theForm.Amount.focus();
return (false);
}

var whatGift_Type = getCheckedValue(document['myForm'].elements['Gift_Type'])

if (whatGift_Type=="") {
alert("Please select either \"This is a one-time gift \" or \"I want to make a new pledge with this gift as the first payment\" ");
return (false);
}

if (theForm.Billing_Address.value == "")
{
alert("Please enter a value for the \"Billing Address\" field.");
theForm.Billing_Address.focus();
return (false);
}
if (theForm.Billing_City.value == "")
{
alert("Please enter a value for the \"Billing City\" field.");
theForm.Billing_City.focus();
return (false);
}
if (theForm.Billing_State.value == "")
{
alert("Please enter a value for the \"Billing State\" field.");
theForm.Billing_State.focus();
return (false);
}
if (theForm.Billing_Zip.value == "")
{
alert("Please enter a value for the \"Billing Zip\" field.");
theForm.Billing_Zip.focus();
return (false);
}
if (theForm.Email.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.Email.focus();
return (false);
}

if (echeck(theForm.Email.value)==false){
theForm.Email.focus();
return (false);
}



return (true);
}
</script>
</head>
<body onload="showHide();">
<form action="formSubmit.asp" method="post" name="myForm" id="myForm" onsubmit="return validate(this);">
<em> * Required fields</em>
<table width="700" border="0">
<tr>
<th scope="row" width="150">*First Name</th>
<td><input name="First_Name" size="23" /></td>
</tr>
<tr>
<th scope="row">*Last Name</th>
<td><input name="Last_Name" size="23" /></td>
</tr>
<tr>
<th scope="row">School/Department</th>
<td><select name="Constituent_Type" id="Constituent_Type">
<option value="1st_option">1st_option</option>
<option value="2nd_option">2nd_option</option>
</select></td>
</tr>
<tr>
<th scope="row">Amount</th>
<td><input name="Amount" type="text" onchange="updatePledgeSentence();" /></td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td><input name="Gift_Type" type="radio" value="This is a one-time gift" onclick="showHide();" />
This is a one-time gift <br />
<input name="Gift_Type" type="radio" value="I want to make a new pledge with this gift as the first payment" onclick="showHide();" />
I want to make a new pledge with this gift as the first payment <br />
<span id="multiYearPledgeArea" name="multiYearPledgeArea" style="display:none">
<table>
<tr>
<td rowspan="2"><input name="Pledge_Amount" type="text" id="Pledge_Amount" size="30" class="dis" onFocus="blur();" />
<select name="Pledge_End_Date" id="Pledge_End_Date">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013" selected="selected">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select></td>
</tr>
</table>
</span></td>
</tr>
<tr>
<th scope="row">Designate my gift/pledge to support:</th>
<td><select name="Description" id="Description">
<option value="OptionA">OptionA</option>
<option value="OptionB">OptionB</option>
</select></td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="TARGET" id="TARGET" /></th>
<td>Checkbox text here</td>
</tr>
<tr>
<th scope="row">*Billing Address</th>
<td><input name="Billing_Address" type="text" /></td>
</tr>
<tr>
<th scope="row">*Billing City</th>
<td><input name="Billing_City" type="text" /></td>
</tr>
<tr>
<th scope="row">*Billing State</th>
<td><input name="Billing_State" type="text" size="2" maxlength="2" /></td>
</tr>
<tr>
<th scope="row">*Billing Zip</th>
<td><input name="Billing_Zip" type="text" /></td>
</tr>
<tr>
<th scope="row">*Email</th>
<td><input name="Email" type="text" /></td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td><input type="submit" name="submit" value="Next"/></td>
</tr>
</table>
</form>
</body>
</html>

P.S. I have just corrected that over and over again...

billthecat
07-23-2009, 09:43 PM
Brilliant it works!

I substituted your updatePledgeSentence function and changed
[CODE]
formatAmount();
[CODE]
to
[CODE]
formatAmount(document.getElementById("myForm").Amount.value);
[CODE]

Form works great! Thank you so much!

billthecat
07-23-2009, 09:44 PM
Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum