Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with javascript for paypal

    Hey guys, I need some help with my website I am making, I have gotten into reading over javascript to try to learn but I am probably far from being able to do anything. If someone wouldnt mind helping that would be great. This is what I am trying to do.


    here is a sample page of what the code needs to go along with- yes please excuse the crappy coding of HTML and what not.
    http://decaldude.net/honda.html

    i am using paypals add to cart buttons. the problem with them is that they only allow you to specify a single price for an item. the two drop down boxes you see have options that can change the cost of that item. so basically what i need is some javascript that looks at the options chosen and based on what is selected, modify the price that is sent to paypal. so yeah would be great if someone could help.

    dont want to ask too much but if someone else wanted to make it display that change in price where i have the price listed that would be awesome.

    yeah i make decals so if anyone wants to help out and wants a custom sticker made for them just lemme know.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Set the price as the option value and then onchange, set the amount field to the selected value.

    Code:
    <input type="hidden" name="amount" value="5.00" />
    <select name="os1" onchange="this.form.amount=this.value;">
    <option value="5.00">No</option>
    <option value="7.00">Yes  +$2</option>
    </select>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    These shopping carts often have peculiar twists, so I do not guarantee that this will work properly or at all. Test it and then if OK follow the same procedure for your other option/price combinations.

    Code:
    <!-- paypal form begin -->
    
    <form name = "myform1" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_cart" /><input type="hidden" name="business" value="paypal@decaldude.net" /><input type="hidden" name="item_name" value="Centercap" /><input type="hidden" name="item_number" value="Centercap" /><input type="hidden" name="amount" value="8.00" /><input type="hidden" name="shipping" value="0.00" /><input type="hidden" name="cn" value="Special Instructions" /><table><tr><td><input type="hidden" name="on0" value="Color" />Choose Color:</td><td><select name="os0" onchange = "adjustPrice(this.value)">
    <option value="White">White</option><option value="Black">Black</option><option value="Red">Red</option><option value="Blue">Blue</option><option value="Orange">Orange</option><option value="Purple">Purple</option><option value="Silver">Silver</option><option value="Gold">Gold</option><option value="Pink">Pink</option><option value="Yellow">Yellow</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="hidden" name="on1" value="Model:">Model:</td><td><select name="os1"><option value="06+ Civic" selected="selected">06+ Civic<option value="Fit">Fit</select></td></tr></table><input type="image" src="images/addcart.png" border="0" name="submit" alt="Add to cart" /><input type="hidden" name="add" value="1" /></form>
    
    <script type = "text/javascript">
    function adjustPrice(which) {
    document.myform1.amount.value = "8.00";  // the default value
    if (which == "White") {document.myform1.amount.value = "9.50"}
    if (which == "Black") {document.myform1.amount.value = "9.75"}
    if (which == "Red") {document.myform1.amount.value = "8.50"}
    
    // and so on for all the other options
    
    alert (document.myform1.amount.value);  // for testing
    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value;  //show changed price
    }
    
    <select name="os1" onchange = "adjustForCling(this.value)" >
    <option value="No">No<option value = "Yes" >Yes  +$2</select>
    
    function adjustForCling(which) {
    var addn = 0;
    if (which == "Yes") {addn = 2} //  add $2 - but change the option value to simply "Yes" (capitalisation must be exact)
    if (which == "No") {  // customer has changed his mind!!
    addn = -2;  // so deduct $2 again!
    }
    
    document.myform1.amount.value = parseFloat(document.myform1.amount.value,10) + addn; 
    
    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value;  //show changed price
    
    }
    </script>
    			
    <!-- paypal form end -->
    Comment on glenngv's code - this works in one sense, but presumably the option value such as "White" or "Red" is required to be transmitted as part of the order and cannot simply be replaced by the appropriate price.


    In last month's article about beer and the many breweries in Belgium, 'rapist monks' should have read 'Trappist monks'. - Woking Review
    Last edited by Philip M; 12-06-2009 at 11:15 AM. Reason: Add show changed price and correct error highlighted by glenngv

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Seeing the 'Static Cling' dropdown with +$2 on 'Yes' option, I assumed that this is the only one that affects the price and not the color.
    Last edited by glenngv; 12-06-2009 at 09:43 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by glenngv View Post
    Seeing the 'Static Cling' dropdown with +$2 on 'Yes' options, I assumed that this is the only one that affects the price and not the color.
    I interpreted it that the colors selected also affected the price.
    "the two drop down boxes you see have options that can change the cost of that item."

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I would do it this way:

    Code:
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="business" value="paypal@decaldude.net" />
    <input type="hidden" name="item_name" value="FitFreak.net" />
    <input type="hidden" name="item_number" value="FitFreak.net" />
    <input type="hidden" name="amount" value="5.00" />
    <input type="hidden" name="shipping" value="0.00" />
    <input type="hidden" name="cn" value="Special Instructions" />
    <table>
    <tr><td><input type="hidden" name="on0" value="Color" />Choose Color:</td><td>
    <select name="os0" onchange="setAmount(this.form);">
    <option value="White" amount="5.00">White</option>
    <option value="Black" amount="5.50">Black</option>
    <option value="Red" amount="6.00">Red</option>
    <option value="Blue" amount="5.00">Blue</option>
    <option value="Orange" amount="6.00">Orange</option>
    <option value="Purple" amount="7.00">Purple</option>
    <option value="Silver" amount="6.50">Silver</option>
    <option value="Gold" amount="8.00">Gold</option>
    <option value="Pink" amount="9.00">Pink</option>
    <option value="Yellow" amount="5.00">Yellow</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="hidden" name="on1" value="Static Cling::">Static Cling:</td>
    <td>
    <select name="os1" onchange="setAmount(this.form);">
    <option value="No" amount="0.00">No</option>
    <option value="Yes  +$2" amount="2.00">Yes  +$2</option>
    </select>
    </td></tr>
    </table>
    <input type="image" src="images/addcart.png" border="0" name="submit" alt="Add to cart" />
    <input type="hidden" name="add" value="1" />
    </form>
    This script should be written only once since it can be re-used by all forms as the names of the 2 dropdowns in each form are the same.
    Code:
    <script type = "text/javascript">
    function setAmount(objForm){
        var sel1 = objForm.os0;
        var sel2 = objForm.os1;
        objForm.amount.value = Number(sel1.options[sel1.selectedIndex].amount) + Number(sel2.options[sel2.selectedIndex].amount);
    }
    </script>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Philip M View Post
    I interpreted it that the colors selected also affected the price.
    "the two drop down boxes you see have options that can change the cost of that item."
    But you initially coded it like the color dropdown is the ONLY one that affects the price. Then later you modified your post to add the other dropdown.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Philip M View Post
    These shopping carts often have peculiar twists, so I do not guarantee that this will work properly or at all. Test it and then if OK follow the same procedure for your other option/price combinations.

    Code:
    <!-- paypal form begin -->
    
    <form name = "myform1" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_cart" /><input type="hidden" name="business" value="paypal@decaldude.net" /><input type="hidden" name="item_name" value="Centercap" /><input type="hidden" name="item_number" value="Centercap" /><input type="hidden" name="amount" value="8.00" /><input type="hidden" name="shipping" value="0.00" /><input type="hidden" name="cn" value="Special Instructions" /><table><tr><td><input type="hidden" name="on0" value="Color" />Choose Color:</td><td><select name="os0" onchange = "adjustPrice(this.value)">
    <option value="White">White</option><option value="Black">Black</option><option value="Red">Red</option><option value="Blue">Blue</option><option value="Orange">Orange</option><option value="Purple">Purple</option><option value="Silver">Silver</option><option value="Gold">Gold</option><option value="Pink">Pink</option><option value="Yellow">Yellow</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="hidden" name="on1" value="Model:">Model:</td><td><select name="os1"><option value="06+ Civic" selected="selected">06+ Civic<option value="Fit">Fit</select></td></tr></table><input type="image" src="images/addcart.png" border="0" name="submit" alt="Add to cart" /><input type="hidden" name="add" value="1" /></form>
    
    <script type = "text/javascript">
    function adjustPrice(which) {
    document.myform1.amount.value = "8.00";  // the default value
    if (which == "White") {document.myform1.amount.value = "9.50"}
    if (which == "Black") {document.myform1.amount.value = "9.75"}
    if (which == "Red") {document.myform1.amount.value = "8.50"}
    
    // and so on for all the other options
    
    alert (document.myform1.amount.value);  // for testing
    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value;  //show changed price
    }
    
    <select name="os1" onchange = "adjustForCling(this.value)" >
    <option value="No">No<option value = "Yes" >Yes  +$2</select>
    
    function adjustForCling(which) {
    var addn = 0;
    if (which == "Yes") {addn = 2} //  add $2 - but change the option value to simply "Yes" (capitalisation must be exact)
    if (which == "No") {  // customer has changed his mind!!
    addn = -2;  // so deduct $2 again!
    }
    
    document.myform1.amount.value = document.myform1.amount.value + addn; 
    
    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value;  //show changed price
    
    }
    </script>
    			
    <!-- paypal form end -->
    Comment on glenngv's code - this works in one sense, but presumably the option value such as "White" or "Red" is required to be transmitted as part of the order and cannot simply be replaced by the appropriate price.


    In last month's article about beer and the many breweries in Belgium, 'rapist monks' should have read 'Trappist monks'. - Woking Review
    I don't see any advantage of using 2 functions (adjustPrice and adjustForCling) to calculate the amount when you can easily integrate the two.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by glenngv View Post
    I don't see any advantage of using 2 functions (adjustPrice and adjustForCling) to calculate the amount when you can easily integrate the two.
    Yes, you are quite right. The second was a later addition!
    Quote Originally Posted by glenngv View Post
    But you initially coded it like the color dropdown is the ONLY one that affects the price. Then later you modified your post to add the other dropdown.
    Obviously you can combine them. But is there any real disadvantage either?

    As always, your scripts are much more elegant than mine. But mine still (usually) work!

    And I did supply the "awesome" snippet of requested code:-

    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value; //show changed price
    Last edited by Philip M; 12-06-2009 at 10:57 AM.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    More code to maintain especially the page has multiple forms. Your 2 functions are not re-usable so you need to add those 2 functions per form.

    Plus, your code will fail if "Yes" is selected. It will do a string append instead of math addition because field values are string.

    Code:
    document.myform1.amount.value = document.myform1.amount.value + addn;
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by glenngv View Post
    More code to maintain especially the page has multiple forms. Your 2 functions are not re-usable so you need to add those 2 functions per form.

    Plus, your code will fail if "Yes" is selected. It will do a string append instead of math addition because field values are string.

    Code:
    document.myform1.amount.value = document.myform1.amount.value + addn;
    Ah, woe is me!

    Code:
    document.myform1.amount.value = parseFloat(document.myform1.amount.value,10) + addn;
    Now corrected in code in Post#3 above.
    Last edited by Philip M; 12-06-2009 at 11:14 AM.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Philip M View Post
    As always, your scripts are much more elegant than mine. But mine still (usually) work!

    And I did supply the "awesome" snippet of requested code:-

    document.getElementById("price_text").innerHTML = "$" + document.myform1.amount.value; //show changed price
    I didn't notice that there is a request for that code. I guess I didn't pay attention to the last part of the post.

    Now looking back at your code, I noticed it will still fail if user selects Yes and then selects color. The displayed price text will only show the price for the color excluding the +$2 for the Yes option. Had you combined the code into 1 function, you wouldn't have a problem like this.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by glenngv View Post
    I didn't notice that there is a request for that code. I guess I didn't pay attention to the last part of the post.

    Now looking back at your code, I noticed it will still fail if user selects Yes and then selects color. The displayed price text will only show the price for the color excluding the +$2 for the Yes option. Had you combined the code into 1 function, you wouldn't have a problem like this.
    Well, as you have provided a better solution I won't bother to re-work my code to deal with this. I ought to have studied the whole problem in more depth before creating a script to deal with only one aspect of it and then cobbling up a modification to cover another facet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •