Integrating with PayPal

[goldensunrise]

Hi,

I am really stuck on the following code. I know that I need to add some IF statements but, at this point I am tired (I have a 10 month old son) and frustrated with the whole code thing. I know it should be simple but, I just can't get it to work. Basically, when a person clicks "add to cart" it should add what they selected but, it doesn't. Please take a look at the code and the sample page (

http://malleyz.com/samples/talkinrocks/order1.shtml).

If you have any ideas on how to make it work properly, please feel free to post. Thanks.

<form target="paypal" action="

https://www.paypal.com/cgi-bin/webscr"

method="post">
<table style="text-align:left;" align="center">
<tr>
<td>
<input type="hidden" name="rock_size" value="Rock Size" /><b>Rock Size</b> <br />Rock is a natural product - color and texture will vary.
</td>
<td>
<select id="rock_size" onchange='
if (options.value == "xsmall"){
xs1.style.display ="block";
s1.style.display ="none";
sm1.style.display ="none";
m1.style.display ="none";
ml1.style.display ="none";
l1.style.display ="none";
xl1.style.display ="none";
}
if (options.value == "small"){
xs1.style.display ="none";
s1.style.display ="block";
sm1.style.display ="none";
m1.style.display ="none";
ml1.style.display ="none";
l1.style.display ="none";
xl1.style.display ="none";
}
if (options.value == "small_med"){
xs1.style.display ="none";
s1.style.display ="none";
sm1.style.display ="block";
m1.style.display ="none";
ml1.style.display ="none";
l1.style.display ="none";
xl1.style.display ="none";
}
if (options.value == "medium"){
xs1.style.display ="none";
s1.style.display ="none";
sm1.style.display ="none";
m1.style.display ="block";
ml1.style.display ="none";
l1.style.display ="none";
xl1.style.display ="none";
}
if (options.value == "med_large"){
xs1.style.display ="none";
s1.style.display ="none";
sm1.style.display ="none";
m1.style.display ="none";
ml1.style.display ="block";
l1.style.display ="none";
xl1.style.display ="none";
}
if (options.value == "large"){
xs1.style.display ="none";
s1.style.display ="none";
sm1.style.display ="none";
m1.style.display ="none";
ml1.style.display ="none";
l1.style.display ="block";
xl1.style.display ="none";
}
if (options.value == "xlarge"){
xs1.style.display ="none";
s1.style.display ="none";
sm1.style.display ="none";
m1.style.display ="none";
ml1.style.display ="none";
l1.style.display ="none";
xl1.style.display ="block";
}
'>
<option value="xsmall">X-Small ( 2"x 2.5")</option>
<option value="small">Small (3" x 5")</option>
<option value="small_med">Small/Med (5" x 6")</option>
<option value="medium">Medium (7" x 9")</option>
<option value="med_large">Med/ Large (9" x 10")</option>
<option value="large">Large (12" x 11")</option>
<option value="xlarge">X- Large (14" x 12")</option>
</select>
</td>
</tr>

<tr>
<td>
<input type="hidden" name="inscription_type" value="Inscription Type" /><b>Inscription Type</b>
</td>
<td>
<div id='dtype'>
<select id="inscription_type" onchange='
if(options.value == "stext"){
itext.style.display = "block";
itext2.style.display = "block";
itext3.style.display = "block";
itext4.style.display = "block";
iimage.style.display = "none";
iimage2.style.display = "none";

xsib.style.display = "none";
xsii.style.display = "block";
sib.style.display ="none";
sii.style.display ="block";
smib.style.display ="none";
smii.style.display ="block";
mib.style.display ="none";
mii.style.display ="block";
mlib.style.display ="none";
mlii.style.display ="block";
lib.style.display ="none";
lii.style.display ="block";
xlib.style.display ="none";
xlii.style.display ="block";
}
if(options.value == "simage"){
itext.style.display = "none";
itext2.style.display = "none";
itext3.style.display = "none";
itext4.style.display = "none";
iimage.style.display = "block";
iimage2.style.display = "block";

xsib.style.display = "none";
xsii.style.display = "block";
sib.style.display ="none";
sii.style.display ="block";
smib.style.display ="none";
smii.style.display ="block";
mib.style.display ="none";
mii.style.display ="block";
mlib.style.display ="none";
mlii.style.display ="block";
lib.style.display ="none";
lii.style.display ="block";
xlib.style.display ="none";
xlii.style.display ="block";
}
if(options.value == "sboth"){
itext.style.display = "block";
itext2.style.display = "block";
itext3.style.display = "block";
itext4.style.display = "block";
iimage.style.display = "block";
iimage2.style.display = "block";

xsib.style.display = "block";
xsii.style.display = "none";
sib.style.display ="block";
sii.style.display ="none";
smib.style.display ="block";
smii.style.display ="none";
mib.style.display ="block";
mii.style.display ="none";
mlib.style.display ="block";
mlii.style.display ="none";
lib.style.display ="block";
lii.style.display ="none";
xlib.style.display ="block";
xlii.style.display ="none";

}
'>
<option value="stext">Text</option>
<option value="simage">Image</option>
<option value="sboth">Both</option>
</select>
</div>
</td>
</tr>

<tr>
<td>
<div id="itext"><b>Inscription Text</b><br /> Spelled exactly as you want it to appear, upper and/or lower case letters, puncuation, symbols etc.</div>
</td>
<td>
<div id="itext2"><textarea name="inscription_text" cols="15" rows="5"></textarea></div>
</td>
</tr>
<tr>
<td>
<div id="itext3">
<input type="hidden" name="inscription_font" value="Inscription Font" /><b>Inscription Font</b>
<br /><img src="images/fonts.jpg" alt="" />
</div>
</td>
<td>
<div id="itext4">
<select name="inscription_font">
<option value="Chandler">Chandler</option>
<option value="Jilmax">Jilmax</option>
<option value="Lucida Calli">Lucida Calli</option>
<option value="Beaver Thin">Beaver Thin</option>
<option value="Gouge">Gouge</option>
<option value="Monotype Cursive">Monotype Cursive</option>
<option value="Bookman">Bookman</option>
<option value="Brush Thin">Brush Thin</option>
<option value="Richard">Richard</option>
<option value="Delight">Delight</option>
<option value="Archbold">Archbold</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div id="iimage" style="display:none;">
<b>Inscription Image</b><br /> Description of image and how you want it to appear. <h6 style="font-size:.7em;margin:5px;">* <i>E-mail unique images to see about including on rock.</i></h6>
</div>
</td>
<td>
<div id="iimage2" style="display:none;">
<textarea name="inscription_image" cols="15" rows="5"></textarea>
</div>
</td>
</tr>
<tr>
<td>
<b>Preferences</b><br /> Standup or flat laying, coloring on rock- grey tones, brown tones, red tones. Leave blank if you want designer to do all layout and design <h6 style="font-size:.7em;margin:5px;">* <i> These are not guaranteed; however, we will try to get as close as possible to your preferences.</i></h6>
</td>
<td>
<textarea name="preferences" cols="15" rows="5"></textarea>
</td>
</tr>
<tr>
<td>
<b>Aditional Information</b><br />Anything else you think we should know before creating your rock.</td>
<td>
<textarea name="additional_information" cols="15" rows="5"></textarea>
</td>
</tr>
<tr>
<td>
<b>Do you want us to include gift card stating as gift from sender?</b>
</td>
<td>
<input type="radio" name="gift" value="Yes" />Yes
<input type="radio" name="gift" value="No" />No
</td>
</tr>
<tr>
<td>
<br />
</td>
<td align="right">
<input type="image" src="

https://www.paypal.com/en_US/i/btn/x-click-but22.gif"

border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="

https://www.paypal.com/en_US/i/scr/pixel.gif"

width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="amber@malleyz.com">
<div id="xs1" style="display:block;">
<div id="xsii" style="display:none;">
<input type="hidden" name="item_name" value="X-Small: Inscription OR Image" />
<input type="hidden" name="item_number" value="xs1" />
<input type="hidden" name="amount" value="7.00" />
$7.00
</div>
<div id="xsib" style="display:none;">
X-Small not available in this style. Choose either Text OR Inscription.
</div>
</div>
<div id="s1" style="display:none;">
<div id="sii" style="display:none;">
<input type="hidden" name="item_name" value="Small: Inscription OR Image" />
<input type="hidden" name="item_number" value="xs1" />
<input type="hidden" name="amount" value="13.00" />
$13.00
</div>
<div id="sib" style="display:none;">
<input type="hidden" name="item_name" value="Small: Inscription AND Image" />
<input type="hidden" name="item_number" value="xs2" />
<input type="hidden" name="amount" value="16.00" />
$16.00
</div>
</div>
<div id="sm1" style="display:none;">
<div id="smii" style="display:none;">
<input type="hidden" name="item_name" value="Small/Med: Inscription OR Image" />
<input type="hidden" name="item_number" value="ms1" />
<input type="hidden" name="amount" value="20.00" />
$20.00
</div>
<div id="smib" style="display:none;">
<input type="hidden" name="item_name" value="Small/Med: Inscription AND Image" />
<input type="hidden" name="item_number" value="ms2" />
<input type="hidden" name="amount" value="25.00" />
$25.00
</div>
</div>
<div id="m1" style="display:none;">
<div id="mii" style="display:none;">
<input type="hidden" name="item_name" value="Medium: Inscription AND Image" />
<input type="hidden" name="item_number" value="m2" />
<input type="hidden" name="amount" value="30.00" />
$30.00
</div>
<div id="mib" style="display:none;">
<input type="hidden" name="item_name" value="Medium: Inscription AND Image" />
<input type="hidden" name="item_number" value="m2" />
<input type="hidden" name="amount" value="37.00" />
$37.00
</div>
</div>
<div id="ml1" style="display:none;">
<div id="mlii" style="display:none;">
<input type="hidden" name="item_name" value="Med/Large: Inscription OR Image" />
<input type="hidden" name="item_number" value="ml1" />
<input type="hidden" name="amount" value="36.00" />
$36.00
</div>
<div id="mlib" style="display:none;">
<input type="hidden" name="item_name" value="Med/Large: Inscription AND Image" />
<input type="hidden" name="item_number" value="ml2" />
<input type="hidden" name="amount" value="44.00" />
$44.00
</div>
</div>
<div id="l1" style="display:none;">
<div id="lii" style="display:none;">
<input type="hidden" name="item_name" value="Large: Inscription OR Image" />
<input type="hidden" name="item_number" value="l1" />
<input type="hidden" name="amount" value="45.00" />
$45.00
</div>
<div id="lib" style="display:none;">
<input type="hidden" name="item_name" value="Large: Inscription AND Image" />
<input type="hidden" name="item_number" value="l2" />
<input type="hidden" name="amount" value="55.00" />
$55.00
</div>
</div>
<div id="xl1" style="display:none;">
<div id="xlii" style="display:none;">
<input type="hidden" name="item_name" value="X-Large: Inscription OR Image" />
<input type="hidden" name="item_number" value="xl1" />
<input type="hidden" name="amount" value="65.00" />
$65.00
</div>
<div id="xlib" style="display:none;">
<input type="hidden" name="item_name" value="X-Large: Inscription AND Image" />
<input type="hidden" name="item_number" value="xl2" />
<input type="hidden" name="amount" value="78.00" />
$78.00
</div>
</div>
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</td>
</tr>
</table>
</form>

 

[BillyRayPreachersSon]

Do you see any errors? Have you tried running this in Firefox and seeing if the JavaScript console shows you any?

I ask because these are often quite meaningful, and could point out the error immediately.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ggriffit]

It also looks like some of the parameters you are setting are common for more that one option, I'd consider setting them all to one value e.g. none at the start of the fucntion then you'd only need to update the ones that changed rather than repeat all the code everytime.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005

http://www.greggriffiths.org/livelink/

 

[trollacious]

Why do you have 2 form elements named rock_size?

<input type="hidden" name="rock_size" value="Rock Size" /><b>Rock Size</b> <br />Rock is a natural product - color and texture will vary.</td>
<td><select id="rock_size" onchange='

Try validating your page(s) at

http://validator.w3.org.

And I agree that checking for Javascript errors in Firefox would help you IMMENSELY.

Lee

 

[theniteowl]

You have problems with your xsfunc function.
Several lines use only = rather than == for making comparisions. The equal sign alone is used to assign one value to another so all of your if statements with only a single equal sign will ALWAYS evaluate true because it only assigns a value, it does not compare one value to the other.

The last line you use "is null" which is not a valid statement in Javascript. You would use "== null" instead.

Because the is null statement is invalid javascript craps out on that line and the whole function is lost. Later on in your code you make a call to xsfunc which returns another error saying xsfunc is not defined because of the errors up top.

function xsfunc()
{
  var rsize = document.myForm.rock_size.options.value;
  if(rsize [COLOR=red]=[/color] "xsmall"){
    [COLOR=green]...code deleted for brevity

if(rsize = "small"){
...code deleted for brevity[/code]
if(rsize = "small_med"){
...code deleted for brevity[/code]
if(rsize = "medium"){
...code deleted for brevity[/code]
if(rsize = "med_large"){
...code deleted for brevity[/code]
if(rsize == "large"){
...code deleted for brevity[/code]
if(rsize == "xlarge"){
...code deleted for brevity[/code]
if(rsize is null){
[/code]


At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

Whoops! Screwed up my markup. Well, it's still clear what I was showing.

At my age I still learn something new every day, but I forget two others.

 

[goldensunrise]

Hey guys....don't know what happened but, somehow I ended up uploading the wrong page. It's fixed now.