Forum Moderators: open

Message Too Old, No Replies

JS & FF duke it out!

Works fine in IE, dies in FF

         

thecheeta

2:52 pm on Jul 20, 2005 (gmt 0)

10+ Year Member



Arg. Having serious issues here, and looking for ideas. Probably something simple. This is a registration page for a yearly event. The custom JS I created to talk to Paypal works in IE, break in FF. It seems that the functions are not getting defined for some reason, among other errors.

Here is the abbreviated HTML for the form (I left out design elements, etc.

<!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>
<title> 05 \ registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="includes/register.js" type="text/javascript"></script>
<link href="includes/2005.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" method="post" name="info" class="bodyText">
First Name
<input name="firstname" type="text" id="firstname" size="30" />

Last Name
<input name="lastname" type="text" id="lastname2" size="30" />

Address 1
<input name="address1" type="text" id="address12" size="30" />

Address 2
<input name="address2" type="text" id="address22" size="30" />

City
<input name="city" type="text" id="city2" />

State
<input name="state" type="text" id="state2" size="6" maxlength="2" />

Zip
<input name="zip" type="text" id="zip2" size="15" />

Email
<input name="email" type="text" id="email2" size="30" />

Day Phone
<input name="dayphone" type="text" id="dayphone2" />

Night Phone
<input name="nightphone" type="text" id="nightphone2" />

<p>Scroll to the package deal you would liek to purchase, select any appropriate options, then click Continue to go on to the PayPal payment center. </p>
</form>

<input type="hidden" name="package" value="Package%20A" />
<input type="hidden" name="packcost" value="74" />
<input type="checkbox" name="cruise" value="true" checked disabled />
<a href="thursday.html" target="_blank">Cruise</a><br />
<input type="checkbox" name="workshop" value="true" checked disabled />
<a href="saturday.html#workshop" target="_blank">Workshop</a><br />
<input type="checkbox" name="tshirt" value="true" checked disabled />
<a href="tshirt.html" target="_blank">T-shirt</a>
<select name="style">
<option selected>Select a Style</option>
<option value="standard male">Standard Male T</option>
<option value="female baby doll">Female Baby Doll</option>
</select>
<select name="size">
<option selected>Select a Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-Large</option>
</select>
<br />
Your current total is
<input type="text" name="total" size="10" value="$99.00" disabled />
<br />
<input type="submit" name="Submit" value="Continue" onclick="registerPaypal(this.form); return false" />
(AND SO ON FOR TWO OTHER IDENTICALLY CODED SECTIONS...)
</span></p>
</form>
</body>
</html>

And the JS:

function registerPaypal(form) {
var paypalURL="https://www.paypal.com/cgi-bin/webscr?cmd=_ext-enter&redirect_cmd=_xclick&business=me@example.com
&return=http%3A//www.example.com/thankyou.html&cancel_return=http%3A//www.example.com/cancel.html&image_url=
http%3A//www.example.com/images/banner.gif&first_name="+document.forms[0].firstname.value+"&last_name=
"+document.forms[0].lastname.value+"&address1="+document.forms[0].address1.value+"&address2="+
document.forms[0].address2.value+"&city="+document.forms[0].city.value+"&state="+document.forms[0].state.value+"&zip=
"+document.forms[0].zip.value+"&day_phone_a="+document.forms[0].dayphone.value+"&night_phone_a="+
document.forms[0].nightphone.value+"&item_name=Saint%20Louis%20Lindy%20Blues%20Exchange%202003"
var restofURL
if (form.tshirt.checked) {
if (form.style.options[0].selected ¦¦ form.size.options[0].selected) {alert ("Please select a style and size"); return false}
else {restofURL= "%20" + form.package.value + "&amount=" + form.total.value + "&item_number=" + form.package.value + "&on0=T-Shirt&os0=" + form.size.options.value + ",%20" + form.style.options.value + ",%20" + "&on1=Options&os1=workshop-" + form.workshop.checked + "%20cruise-" + form.cruise.checked
location.href=(paypalURL + restofURL); return false
}
}
else {restofURL= "%20" + form.package.value + "&amount=" + form.total.value + "&item_number=" + form.package.value + "&on0=T-Shirt&os0=NONE,%20NA&on1=Options&os1=workshop-" + form.workshop.checked + "%20cruise-" + form.cruise.checked
location.href=(paypalURL + restofURL); return false}
}
function formatCurrency(num) {
num = num.toString().replace(/\$¦\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
function modifyTotal(form) {
var initialCost = parseFloat(form.packcost.value)
var addOn = 0.00
var workingTotal = initialCost
var cruise = 12.50
var workshop = 12.50
var tshirt = 15.00
if (form.tshirt.checked) {
addOn = tshirt
}
workingTotal = workingTotal + addOn
addOn = 0
if (form.cruise.checked) {
addOn = cruise
}
workingTotal = workingTotal + addOn
addOn = 0.00
if (form.workshop.checked) {
addOn = workshop
}
workingTotal = workingTotal + addOn
addOn = 0.00
workingTotal = formatCurrency(workingTotal)
addOn = 0.00
form.total.value = workingTotal
}

[edited by: jatar_k at 5:45 am (utc) on July 21, 2005]
[edit reason] shortened code more [/edit]

jatar_k

5:46 am on Jul 21, 2005 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



my wild guess

one problem seems to be an extra closing form tag

<p>Scroll to the package deal you would liek to purchase, select any appropriate options, then click Continue to go on to the PayPal payment center. </p>
</form>

that one shouldn't be there I don't believe

Sathallrin

2:58 pm on Jul 22, 2005 (gmt 0)

10+ Year Member



the problem is firefox does not support document.forms[0]

You would need to set an id for your form, and then use document.getElementById("formid") instead of document.forms[0]

I didn't check to see if it fixes this, so there could be more problems, but this is one problem I noticed right away.

RonPK

7:42 pm on Jul 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



jatar_k is right: remove that </form> tag.

Also, you're sometimes refering to the form simply with 'form'. Replace that by document.forms[0] (which Firefox understands very well; it's standard ECMA script).

Last, you've got a field called 'package'. That happens to be a reserved word in JavaScript, or even a statement, which obviously may cause confusion for a browser. Better replace it with something else (I did, and the form worked fine).