[SOLVED] Multi script PayPal add to cart order form

Tito1 · #1 (**permalink**) 02-09-09, 08:48 PM

Hello there...

I am currently trying to come up with a way to make a custom order page for a Pizzeria's website. Now, I am in no way a true expert in Javascript, all I can do is copy and paste the scripts, and alter them to my needs, so what I am trying to say is that I am a somewhat newbie, so please bear with me. This is what I am trying to accomplish here:

Like I said, I am doing a webpage where people can order pizzas. As a customer, you start first by selecting the pizza's size (small, medium & large) through a dropdown select field. Each option on the select field will have and carry over it's own price according to size option (small pizza $5.00) (medium pizza $7.00) (large $10.00). Now, this is where it gets interesting: As many of you here would know when ever visiting a pizza restaurant, the price for any given topping will be more on the larger size pizzas, and less on the smaller size pizzas. Well, the order form that I have here does just that.

For example: Let's say you select the Small Pizza. Once you do that on my form, a list of checkboxes will appear offering some choices of toppings for your selected Small Pizza. Each topping choice carries it's own price for the selected Small Pizza. But, if you were to select, say the Medium Pizza, then a new list of checkboxes offering the same toppings, but with higher prices will appear, and replace the previous checkbox list of lower priced toppings meant only for the Small Pizza. And if you were to select the Large Pizza instead, then the toppings list of checkboxes will update with even higher topping prices.

Now, with all that said, this form made up by a mash-up collection of Javascripts works pretty much with just one exemption: Even though the name values of the Pizza Sizes are being carried over to the PayPal cart along with any of the selected toppings options with their prices, the price amount of each of the 3 Pizza Sizes are not being added to the shopping cart. I just got stuck on trying to figure out on implementing this last major part of the order form, I don't know where to go from here. So I am hoping somebody here with more brains than me can finish this form, and make it work the way it's supposed to. Here is a link to a live demo of this form if you want to try it out: Custom Pizza Order Form

A few more things: Besides the scripts inside the HTML source code, there is also an external Javascript file supporting this form called "FormManager.js", you can download it from here: External .js file

Besides getting the price variables of the select field Pizza Sizes to pass on to the cart, the one other thing that will be nice to change, will be to have the checkboxes topping values to show up under the Options column on the PayPal cart, and not on the Description column. Well, here's the source code and good luck:

HTML Code:

<html>
    <head>
        <title>Pizza Order Form</title>
        <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /><script type="text/javascript">
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
 if (val < .995) rnd = 1; // for old Netscape browsers
 str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
 pos = str.indexOf (".");
 if (pos > 0) str = str.substring (rnd, pos + 3);
 return str;
}

function ReadForm (obj1, tst) { // process radio and checkbox
var i,j,amt=0,des="",obj,pos,val,tok,tag,
 op1a="",op1b="",op2a="",op2b="",itmn="";
var ary = new Array ();
 if (obj1.baseamt) amt = obj1.baseamt.value*1.0; // base amount
 if (obj1.basedes) des = obj1.basedes.value; // base description
 if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
 if (obj1.baseos0) op1b = obj1.baseos0.value;
 if (obj1.baseon1) op2a = obj1.baseon1.value;
 if (obj1.baseos1) op2b = obj1.baseos1.value;
 if (obj1.baseitn) itmn = obj1.baseitn.value;
 for (i=0; i<obj1.length; i++) { // run entire form
 obj = obj1.elements[i]; // a form element
 if (obj.type == "checkbox" || // checkboxes
 obj.type == "radio") { // and radios
 if (obj.checked) { // did user check it?
 val = obj.value; // the value of the selection
 ary = val.split (" "); // break apart
 for (j=0; j<ary.length; j++) { // look at all items
// first we do single character tokens...
 if (ary[j].length < 2) continue;
 tok = ary[j].substring (0,1); // first character
 val = ary[j].substring (1); // get data
 if (tok == "@") amt = val * 1.0;
 if (tok == "+") amt = amt + val*1.0;
 if (tok == "%") amt = amt + (amt * val/100.0);
 if (tok == "#") { // record item number
 if (obj1.item_number) obj1.item_number.value = val;
 ary[j] = ""; // zap this array element
 }
// Now we do 3-character tokens...
 if (ary[j].length < 4) continue;
 tok = ary[j].substring (0,3); // first 3 chars
 val = ary[j].substring (3); // get data
 if (tok == "s1=") { // value for shipping
 if (obj1.shipping) obj1.shipping.value = val;
 ary[j] = ""; // clear it out
 }
 if (tok == "s2=") { // value for shipping2
 if (obj1.shipping2) obj1.shipping2.value = val;
 ary[j] = ""; // clear it out
 }
 }
 val = ary.join (" "); // rebuild val with what's left

 tag = obj.name.substring (obj.name.length-2); // get flag
 if (tag == "1a") op1a = op1a + " " + val;
 else if (tag == "1b") op1b = op1b + " " + val;
 else if (tag == "2a") op2a = op2a + " " + val;
 else if (tag == "2b") op2b = op2b + " " + val;
 else if (tag == "3i") itmn = itmn + " " + val;
 else if (des.length == 0) des = val;
 else des = des + ", " + val;
 }
 }
 }
// Now summarize stuff we just processed, above
 if (op1a.length > 0) obj1.on0.value = op1a;
 if (op1b.length > 0) obj1.os0.value = op1b;
 if (op2a.length > 0) obj1.on1.value = op2a;
 if (op2b.length > 0) obj1.os1.value = op2b;
 if (itmn.length > 0) obj1.item_number.value = itmn;
 obj1.item_name.value = des;
 obj1.amount.value = Dollar (amt);
 if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</script><script src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script><script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>
    </head>
    <body>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target='_blank'; return ReadForm(this, true);" name="weboptions">
            <input type="hidden" name="cmd" value="_cart" /> <input type="hidden" name="add" value="1" /> <input type="hidden" name="business" value="sdc.pr1@gmail.com " /> <input type="hidden" name="shipping" value="0.00" /> <input type="hidden" name="no_shipping" value="1" /> <input type="hidden" name="return" value="http://sdc.110mb.com/waldypizza/menu.htm" /> <input type="hidden" name="item_name" /> <input type="hidden" name="amount" /> <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="lc" value="US" /> <input type="hidden" name="bn" value="PP-ShopCartBF" /> &nbsp;<strong><font face="Arial" size="5">Select the pizza size:</font></strong>
            <p><select size="1" onclick="ReadForm (this.form, false);" name="basedes">
            <option selected="selected">Pizza Sizes:</option>
            <option value="Small Pizza">Small Pizza - $5.00</option>
            <option value="Medium Pizza">Medium Pizza - $7.00</option>
            <option value="Large Pizza">Large Pizza - $10.00</option>
            </select></p>
            <p>&nbsp;</p>
            <p><strong><font face="Arial" size="4">Add any of the following toppings you want. <br />
            The larger size of Pizza you select, the higher the price for the toppings:</font></strong></p>
            <p><label><input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="pepperoni" value="pepperoni +1.50" />Pepperoni, add: $1.50</label> <label><input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="pepperoni" value="pepperoni +2.75" />Pepperoni, add: $2.76</label> <label><input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="pepperoni" value="pepperoni +4.00" />Pepperoni, add: $4.00</label><br />
            <label><input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="onions" value="onions +1.25" />Onions, add: $1.25</label> <label><input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="onions" value="onions +2.50" />Onions, add: $2.50</label> <label><input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="onions" value="onions +3.75" />Onions, add: $3.75</label><br />
            <label><input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="peppers" value="peppers +1.25" />Peppers, add: $1.25</label> <label><input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="peppers" value="peppers +2.50" />Peppers, add: $2.50</label> <label><input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="peppers" value="peppers +3.75" />Peppers, add: $3.75</label><br />
            <label><input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="mushrooms" value="mushrooms +1.45" />Mushrooms, add: $1.45</label> <label><input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="mushrooms" value="mushrooms +2.65" />Mushrooms, add: $2.65</label> <label><input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="mushrooms" value="mushrooms +3.85" />Mushrooms, add: $3.85</label><br />
            <label><input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="shrimp" value="shrimp +3.55" />Shrimp, add: $3.55</label> <label><input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="shrimp" value="shrimp +4.75" />Shrimp, add: $4.75</label> <label><input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);" name="shrimp" value="shrimp +5.95" />Shrimp, add: $5.95</label></p>
            <p>Total: <input class="nbor" size="7" name="tot" type="text" /></p>
            <p><input type="submit" name="B1" value="Submit" /></p>
        </form>
    </body>
</html>

Yeroon · #2 (**permalink**) 02-10-09, 05:35 AM

Hi,

Tjhis should work. You were not passing any values for the selected pizza size. I added some functionality. It does require that you use a $ sign in the text of the select list. Further comments in the code. I highlighted the changes in red:

Code:

<html>
<head>
    <title>Pizza Order Form</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />

    <script type="text/javascript">
<!--
        function Dollar(val) { // force to valid dollar amount
            var str, pos, rnd = 0;
            if (val < .995) rnd = 1; // for old Netscape browsers
            str = escape(val * 1.0 + 0.005001 + rnd); // float, round, escape
            pos = str.indexOf(".");
            if (pos > 0) str = str.substring(rnd, pos + 3);
            return str;
        }

        function ReadForm(obj1, tst) { // process radio and checkbox
            var i, j, amt = 0, des = "", obj, pos, val, tok, tag,
 op1a = "", op1b = "", op2a = "", op2b = "", itmn = "";
            var ary = new Array();
            if (obj1.baseamt) amt = obj1.baseamt.value * 1.0; // base amount
            if (obj1.basedes) des = obj1.basedes.value; // base description
            if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
            if (obj1.baseos0) op1b = obj1.baseos0.value;
            if (obj1.baseon1) op2a = obj1.baseon1.value;
            if (obj1.baseos1) op2b = obj1.baseos1.value;
            if (obj1.baseitn) itmn = obj1.baseitn.value;
            for (i = 0; i < obj1.length; i++) { // run entire form
                obj = obj1.elements[i]; // a form element
                if (obj.type == "checkbox" || obj.type == "radio") { // checkboxes and radios
                    if (obj.checked) { // did user check it?
                        val = obj.value; // the value of the selection
                        ary = val.split(" "); // break apart
                        for (j = 0; j < ary.length; j++) { // look at all items
                            // first we do single character tokens...
                            if (ary[j].length < 2) continue;
                            tok = ary[j].substring(0, 1); // first character
                            val = ary[j].substring(1); // get data
                            if (tok == "@") amt = val * 1.0;
                            if (tok == "+") amt = amt + val * 1.0;
                            if (tok == "%") amt = amt + (amt * val / 100.0);
                            if (tok == "#") { // record item number
                                if (obj1.item_number) obj1.item_number.value = val;
                                ary[j] = ""; // zap this array element
                            }
                            // Now we do 3-character tokens...
                            if (ary[j].length < 4) continue;
                            tok = ary[j].substring(0, 3); // first 3 chars
                            val = ary[j].substring(3); // get data
                            if (tok == "s1=") { // value for shipping
                                if (obj1.shipping) obj1.shipping.value = val;
                                ary[j] = ""; // clear it out
                            }
                            if (tok == "s2=") { // value for shipping2
                                if (obj1.shipping2) obj1.shipping2.value = val;
                                ary[j] = ""; // clear it out
                            }
                        }
                        val = ary.join(" "); // rebuild val with what's left

                        tag = obj.name.substring(obj.name.length - 2); // get flag
                        if (tag == "1a") op1a = op1a + " " + val;
                        else if (tag == "1b") op1b = op1b + " " + val;
                        else if (tag == "2a") op2a = op2a + " " + val;
                        else if (tag == "2b") op2b = op2b + " " + val;
                        else if (tag == "3i") itmn = itmn + " " + val;
                        else if (des.length == 0) des = val;
                        else des = des + ", " + val;
                    }
                }
	else if (obj.name == 'basedes' && obj.selectedIndex != 0){ //calculate when pizza selected, but dont calculate if nothing selected yet
	    var select_list_selected_index = obj.selectedIndex;
	    // get text of select list. not value because your show/hide code depends on it and we cant change it
	    var text = obj.options[select_list_selected_index].text;
					
                    ary = text.split("$");  //split at $ sign
                    val = ary[1]; // get the second item = the amount
                    amt = amt + eval(val);
                }
            }
            // Now summarize stuff we just processed, above
            if (op1a.length > 0) obj1.on0.value = op1a;
            if (op1b.length > 0) obj1.os0.value = op1b;
            if (op2a.length > 0) obj1.on1.value = op2a;
            if (op2b.length > 0) obj1.os1.value = op2b;
            if (itmn.length > 0) obj1.item_number.value = itmn;
            obj1.item_name.value = des;
            obj1.amount.value = Dollar(amt);
            if (obj1.tot) obj1.tot.value = "$" + Dollar(amt);
        }
//-->
    </script>

    <script src="FormManager.js">
        /****************************************************
        * Form Dependency Manager- By Twey- http://www.twey.co.uk
        * Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
        ****************************************************/
    </script>

    <script type="text/javascript">
        window.onload = function() {
            setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
        };
    </script>

</head>
<body>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target='_blank'; return ReadForm(this, true);"
    name="weboptions">
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="add" value="1" />
    <input type="hidden" name="business" value="sdc.pr1@gmail.com " />
    <input type="hidden" name="shipping" value="0.00" />
    <input type="hidden" name="no_shipping" value="1" />
    <input type="hidden" name="return" value="http://sdc.110mb.com/waldypizza/menu.htm" />
    <input type="hidden" name="item_name" />
    <input type="hidden" name="amount" />
    <input type="hidden" name="currency_code" value="USD" />
    <input type="hidden" name="lc" value="US" />
    <input type="hidden" name="bn" value="PP-ShopCartBF" />
    &nbsp;<strong><font face="Arial" size="5">Select the pizza size:</font></strong>
    <p>
        <select size="1" onclick="ReadForm (this.form, false);" name="basedes">
            <option selected="selected">Pizza Sizes:</option>
            <option value="Small Pizza">Small Pizza - $5.00</option>
            <option value="Medium Pizza">Medium Pizza - $7.00</option>
            <option value="Large Pizza">Large Pizza - $10.00</option>
        </select></p>
    <p>
        &nbsp;</p>
    <p>
        <strong><font face="Arial" size="4">Add any of the following toppings you want.
            <br />
            The larger size of Pizza you select, the higher the price for the toppings:</font></strong></p>
    <p>
        <label>
            <input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="pepperoni" value="pepperoni +1.50" />Pepperoni, add: $1.50</label>
        <label>
            <input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="pepperoni" value="pepperoni +2.75" />Pepperoni, add: $2.76</label>
        <label>
            <input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="pepperoni" value="pepperoni +4.00" />Pepperoni, add: $4.00</label><br />
        <label>
            <input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="onions" value="onions +1.25" />Onions, add: $1.25</label>
        <label>
            <input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="onions" value="onions +2.50" />Onions, add: $2.50</label>
        <label>
            <input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="onions" value="onions +3.75" />Onions, add: $3.75</label><br />
        <label>
            <input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="peppers" value="peppers +1.25" />Peppers, add: $1.25</label>
        <label>
            <input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="peppers" value="peppers +2.50" />Peppers, add: $2.50</label>
        <label>
            <input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="peppers" value="peppers +3.75" />Peppers, add: $3.75</label><br />
        <label>
            <input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="mushrooms" value="mushrooms +1.45" />Mushrooms, add: $1.45</label>
        <label>
            <input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="mushrooms" value="mushrooms +2.65" />Mushrooms, add: $2.65</label>
        <label>
            <input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="mushrooms" value="mushrooms +3.85" />Mushrooms, add: $3.85</label><br />
        <label>
            <input class="DEPENDS ON basedes BEING Small Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="shrimp" value="shrimp +3.55" />Shrimp, add: $3.55</label>
        <label>
            <input class="DEPENDS ON basedes BEING Medium Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="shrimp" value="shrimp +4.75" />Shrimp, add: $4.75</label>
        <label>
            <input class="DEPENDS ON basedes BEING Large Pizza" type="checkbox" onclick="ReadForm (this.form, false);"
                name="shrimp" value="shrimp +5.95" />Shrimp, add: $5.95</label></p>
    <p>
        Total:
        <input class="nbor" size="7" name="tot" type="text" /></p>
    <p>
        <input type="submit" name="B1" value="Submit" /></p>
    </form>
</body>
</html>

Tito1 · #3 (**permalink**) 02-10-09, 08:49 AM

Wow, you are awesome....Yeroon!
Unlike some other so-called PayPal experts on other forum boards, not only did you understand what I was talking about, but you actually came through really fast. By highlighting that new extra code you added in red, now I can learn from it, so thank you very much, that was very courteous and professional of you. Well, I guess I should not be all too surprised, after all, this is Programmingtalk.com, the place to be in for real webmasters. Oh yea before I go, I noticed and clicked on your two links to your sites, the one about World of Worldcraft (yeronimo.com) interests me, I will have to check it out later when I have some time.

Yeroon · #4 (**permalink**) 02-10-09, 09:51 AM

Hi,

Glad you got it working

the yeronimo.com is still under construction. Due to the new expansion Wrath of the Leech King, the librarie I build to parse the warcraft armory is no longer current. So the page will always say there is something wrong with the player info. I still have to fix this, but didnt have the time yet

mnsportsmans · #5 (**permalink**) 02-20-09, 09:34 PM

I've been looking for script to due exactly the same thing. The only thing I would change is the checkboxes to a drop down menu...how can this be done?

Yeroon · #6 (**permalink**) 02-23-09, 05:21 AM

You would have to get the FormManager.js file from Tito1. Or get it from the original source:

http://www.dynamicdrive.com/dynamici...dependency.htm

There you can find instructions on how to use the script for different types of elements. Try that code and just come back to us when you got questions and some source we can work with.