Copied form value reads as a string [Archive]

selfprodigy

07-10-2008, 07:38 PM

Okay i found a link to a script on here a few days back for currency conversion. I've tried to alter it a bit to fit my needs, however I'm having a slight problem. I have a page with 3 fields on it. they are

Price
Currency
Total

They way it's been setup is, when a user enters the price and tabs to the select box, and onblur action occurs. It copies the value into the total box. Then when a selection is made a onchange event fires of calculating the currency in us dollar. The problem is that if its copied from the price field i get a NaN error. However, if i go straight to the total box and type in an amount, and then select a currency it calculates correctly. Any help would be appreciated. I put a demo on test site if you want to see how it works. http://mayco.us/test/currency/credit.cfm

Script

The external javascript file
function f36_InitCurrency(f36_ip,f36_sel,f36_ary){
f36_CIP=document.getElementById(f36_ip);
f36_Sel=document.getElementById(f36_sel);
f36_Sel.options.length=0;
f36_Sel.options[0]=new Option(f36_CIP.value,1,true,true);
for (f36_0=0;f36_0<f36_ary.length;f36_0++){
f36_Sel.options[f36_0+1]=new Option(f36_ary[f36_0][0],f36_ary[f36_0][1],true,true);
}
f36_Sel.selectedIndex=0;
f36_Sel.ip=f36_CIP;
f36_Sel.base=f36_CIP.value;
f36_Sel.onchange=function(){ f36_Calculate(this); }
f36_CIP.sel=f36_Sel;
f36_CIP.onfocus=function(){ f36_Focus(this); }
f36_CIP.onblur=function(){ this.v=this.value; }
f36_CIP.onkeyup=function(){ this.value=this.value.replace(/[^0123456789.]/g,''); }

}

function f36_Focus(obj){
obj.value='';
obj.sel.selectedIndex=0;
}

function f36_Calculate(f36_obj){
//f36_obj.ip.v
if (f36_obj.ip.value.length<1||f36_obj.ip.value==f36_obj.base){ return; }
f36_v=Math.ceil(Number (f36_obj.ip.v)*100*f36_obj.options[f36_obj.selectedIndex].value);
// f36_obj.ip.value=(f36_v/100).toFixed(2);
//f36_v=
f36_obj.ip.value=(f36_v/100).toFixed(2);

}

/*]]>*/

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>George S May International Company</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript">
var f36_CAry=new Array();
f36_CAry[0]=['United States',1.0];
f36_CAry[1]=['Canada',.9768];
</script>

<script language="javascript" type="text/javascript" src="currency.js"></script>
<script language="JavaScript" type="text/javascript" src="validator.js"></script>
<Script Language="JavaScript">
function fnCopy(){
document.form.x_amount.value = parseInt (document.form.price.value);
}
</Script>

<style type="text/css">

</style>

</head>

<body onload="f36_InitCurrency('x_amount','currency',f36_CAry);">

<div id="header">
<div align="left"><img src="images/green_logo.gif" /><span class="style8">
George S May International Company</span></div>
</div>

<form onsubmit="return v.exec()" name="form" action="charge.cfm" method="post">
<table width="65%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td colspan="3"><p class="style9">Enter your credit information.</p>
<p><img src="images/credit_card_logos_10.gif" width="336" height="50" /></p>
<p> </p></td>
</tr>
<tr>
<td width="18%" height="22" id="t_first_name"><div align="right">First Name<strong> </strong></div></td>
<td width="38%"><input type="text" name="x_First_Name" size="35" /></td>
<td width="44%">As it appears on the card</td>
</tr>
<tr>
<td height="25" id="t_last_name"><div align="right">Last Name </div></td>
<td><span class="style1">
<input type="text" name="x_Last_Name" size="35" />
</span></td>
<td>As it appears on the card</td>
</tr>
<tr>
<td height="25" id="t_card_num"><div align="right">Credit Card Number</div></td>
<td><span class="style1">
<input type="text" name="x_card_num" size="35" maxlength="16" />
</span></td>
<td>16 Digit number on the front of the card</td>
</tr>
<tr>
<td height="25" id="t_exp_date"><div align="right">Expiration Date</div></td>
<td><span class="style1">
<input type="text" name="x_exp_date" size="35" maxlength="4" />
</span></td>
<td>(Example : 0910)</td>
</tr>
<tr>
<td height="25" id="t_card_code"><div align="right">CCW Code</div></td>
<td><span class="style1">
<input type="text" name="x_card_code" size="35" maxlength="4" />
</span></td>
<td> 3 or 4 Digit pin located on the back of the card</td>
</tr>
<tr>
<td id="t_total2" height="25"><div align="right">Price</div></td>
<td><input type="text" name="price" onblur="javascript:fnCopy()"/></td>
<td>Price Charged</td>
</tr>
<tr>
<td id="t_total" height="25"><div align="right"></div></td>
<td><span class="style1">
<select name="currency" id="currency">
</select>
</span></td>
<td>Select Currency</td>
</tr>
<tr>
<td height="25" id="t_currency"><div align="right">Total</div> </td>
<td colspan="2"><span class="style1">
<input type="text" name="x_amount" id="x_amount" size="35"/>
Total
</span></td>
</tr>
<tr>
<td> </td>
<td><div align="right">
<input type="reset" value="Reset" name="B2" style="background-image:url(images/button_gradient.jpg)" />
<input type="submit" value="Submit" name="B1" style="background-image:url(images/button_gradient.jpg)" />
 </div></td>
<td> </td>
</tr>
</table>
<br />
    <script language="JavaScript" type="text/javascript" src="//smarticon.geotrust.com/si.js"></script>

<script language="javascript" type="text/javascript">
// form fields description structure
var a_fields = {

'x_First_Name':{'l':'First Name','r':true,'f':'alpha','t':'t_first_name'},
'x_Last_Name':{'l':'Last Name','r':true,'f':'alpha','t':'t_last_name'},
'x_card_num':{'l':'Credit Card Number','r':true,'f':'unsigned','t':'t_card_num'},
'x_exp_date':{'l':'Expiration Date','r':true,'f':'unsigned','t':'t_exp_date'},
'x_card_code':{'l':'Card Code','r':true,'f':'unsigned','t':'t_card_code'},
'currency':{'l':'Currency','r':true,'f':'unsigned','t':'t_currency'},
'x_amount':{'l':'Total','r':true,'t':'t_total'}

},

o_config = {
'to_disable' : ['Submit', 'Reset'],
'alert' : 1
}

// validator constructor call
var v = new validator('form', a_fields, o_config);

</script>

</body>

</html>

Philip M

07-10-2008, 07:57 PM

It would be simpler if you posted only the relevant code.

This may or may not work:-

function fnCopy(){
document.form.x_amount.value = parseInt (document.form.price.value);
document.form.price.value = parseInt (document.form.price.value);
}

<Script Language="JavaScript"> is deprecated. Use <script type = "text/javascript"> instead.

It is also bad practice to give the name "form" to a form. Change it to myform or something.

Haikus are easy
But sometimes they don't make sense.
Refrigerator.

selfprodigy

07-10-2008, 08:53 PM

I ended up getting this to work by doing this

Changed this statement from this.

f36_v=Math.ceil(Number (f36_obj.ip.v)*100*f36_obj.options[f36_obj.selectedIndex].value);

To this:

f36_v=Math.ceil(Number (f36_obj.ip.value)*100*f36_obj.options[f36_obj.selectedIndex].value);

However, i've caused a different problem now. Lets says they put in 100 and select canada.. It comes out to 97.68... But if they go back and select united states the value is now 97.68 instead of 100... hrmm any ideas?

Philip M

07-11-2008, 08:43 AM

This is awful old spaghetti code, far more complex than needed for such a simple application and with an ugly display. I suspect that the original had conversions for many currencies. You have only one. My advice would be to throw it away and start again.