PayPal shopping cart forms and JavaScript

[Mark Hannon]

I am designing a PayPal shopping cart/store for a client and have placed
several of PayPal's shopping cart forms on the page to correspond with
different products. Each form has a unique name though each of the
form's elements have to use PayPal's required naming conventions to pass
the data to their server.

Many of the forms have hard-coded data in them and these have not caused
me any problems. The problems I am having are with 3 forms that need to
send different amounts based on the quantity ordered. I wrote a small
function that worked great on the 1st form but when I created the 2nd
form and wrote the 2nd function, all of the forms that needed to send
conditional amounts broke down and wouldn't work any more.

In any case, I created a simple page to troubleshoot the problem and am
having the same troubles. Please let me know if you can see why they
won't work properly.

Here are my 2 functions:

<script language="JavaScript" type="text/javascript">

function item1_Tally(){
if(document.cart1.quantity.value < 6){
document.cart1.amount.value = 1;
}else if(document.cart1.quantity.value > 5){
document.cart1.amount.value = 2;
}

function item2_Tally(){
if(document.cart2.quantity.value >= 10){
document.cart2.amount.value = 1;
}else if(document.cart2.quantity.value < 10){
document.cart2.amount.value = 3;
}
}
</script>

Here is the very simplified html for the forms. I suspect that since the
2 forms here share elements with identical names, this could be part of
my problem:

<form id="cart1" name="cart1">
<input name="cmd" type="hidden" value="_cart">
<input name="business" type="hidden" value="[e-mail]">
<input name="item_name" type="hidden" value="item1"></h2>
Quantity: <input name="quantity" type="text" size="3" maxlength="3"
value="0">
Amount: <input type="text" name="amount" size="3" maxlength="3"><br>
<input name="tally" type="button" value="Go" onclick="item1_Tally();">
</form>

<form id="cart2" name="cart2">
<input name="cmd" type="hidden" value="_cart">
<input name="business" type="hidden" value="[e-mail]">
<input name="item_name" type="hidden" value="item1">
Quantity: <input name="quantity" type="text" size="3" maxlength="3"
value="0">
Amount: <input type="text" name="amount" size="3" maxlength="3"><br>
<input name="tally" type="button" value="Go" onclick="item2_Tally();">
</form>

Here is a link for a better understanding:
http://www.hannon-illustration.com/j...ypalForms.html

Thanks,

Mark

[RobG]

Mark Hannon wrote:
[...]

Many of the forms have hard-coded data in them and these have not caused
me any problems. The problems I am having are with 3 forms that need to
send different amounts based on the quantity ordered. I wrote a small
function that worked great on the 1st form but when I created the 2nd
form and wrote the 2nd function, all of the forms that needed to send
conditional amounts broke down and wouldn't work any more.
You're missing a closing brace (see below).

In any case, I created a simple page to troubleshoot the problem and am
having the same troubles. Please let me know if you can see why they
won't work properly.

Here are my 2 functions:

<script language="JavaScript" type="text/javascript">

function item1_Tally(){
if(document.cart1.quantity.value < 6){
document.cart1.amount.value = 1;
}else if(document.cart1.quantity.value > 5){
document.cart1.amount.value = 2;
}
^------- You've closed the if, but not the function.

}

function item2_Tally(){
if(document.cart2.quantity.value >= 10){
document.cart2.amount.value = 1;
}else if(document.cart2.quantity.value < 10){
document.cart2.amount.value = 3;
}
}
</script>

Here is the very simplified html for the forms. I suspect that since the
2 forms here share elements with identical names, this could be part of
my problem:

Identical names are valid in HTML, identical IDs are not. Also, names
should not match IDs as they share the same namespace.

The scope of a name in a form is the form, so your naming (as far as I
can tell) is fine. Just fix the missing brace.

You need to be careful with duplicate names. Referencing form elements
by name can return a collection or an element, attempting to access:

document.formA.elementA[0].value

when it's not a collection will return 'undefined' and:

document.formA.elementA.value

will have similar results if ...elementA is a collection (i.e. there
are two or more elements with the name 'elementA' in 'formA').
[...]

--
Rob

[mHannon]

Rob

Thanks for the observation on the missing bracket. I was stunned to see
both forms worked as expected when I fixed it.

For some reason, with the paypal shopping cart I was working on, I
would create a form get it working, and move on to the next form. As
soon as I got the next form working, the first one stopped working.
Since my simple test works so well it has done nothing toward helping
me identify the problem.

Mark