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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Update price and item number on option select

    Hi Javascript Gurus!!
    (I think I'm in the right place with this one...)
    I am building an online store, and I have a web page in PHP that displays the item and dynamically builds <SELECT> options for those items that have them. This part is working fine...
    What I am looking to do is set it up so that when a customer makes a selection in one of the options (there could be 0-3 options for any given item) the page refreshes or somehow updates the price for that item, and also appends a 2 digit code to the item number. I can make the option values the price, the 2 digit item number, or both if need be. The form for this mess is for a paypal shopping cart, so the form action is already pointed to their site. Can someone help this PHP guy who knows squat about JS
    (Management+Coworkers)<>Logic

  • #2
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts
    You should have at least a rudimentary grasp of Javascript before you start this. What you want to do involves defining the onChange attribute of the select. You'll need to create a subroutine that analyzes the form and sets the price each time a selection changes.

    You define the onChange attribute in the HTML select tag....

    Code:
    <form name="form1" action=....>
    <select name="slcMonth" onChange="fnChkForm()">
    <option value="January">January</option>
    <option value="12.50">February</option>
    .
    .
    .
    </form>
    <div id="lyrInfo"></div>
    and, in the head section...

    Code:
    <script language = "javascript">
    function fnChkForm() {
      f=document.form1
      if (f.slcMonth.options[f.selectedIndex].value = "January" {
        document.getElementByID("lyrInfo").innerHTML = "$42.00"
      }
    }
    </script>
    or

    Code:
    <script language = "javascript">
    function fnChkForm() {
    f=document.form1
    myVal = f.slcMonth.options[f.slcMonth.selectedIndex].value
    numPrice = +42 + myVal
    document.getElementById("lyrInfo").innerHTML = "$"+numPrice
    }
    </script>
    Of course, you can run a subroutine before the form is submitted and nix the submission, or modify the form fields before you submit by defining a function for the form tag.

    Code:
    <form name="form1" action="...." onSubmit="return fnSubmit()">
    .
    .
    .
    </form>
    The return bit is important. If fnSubmit returns false, the form won't submit. Within fnSubmit, you can set the value of your hidden form fields based on the final selections just before submitting the form. If it's all good, just return true and the form submits.

    HTH

    2reikis
    Last edited by 2reikis; 07-06-2007 at 11:00 PM. Reason: Missed a code/code set

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey 2reikis,
    what fun would it be knowing what I'm doing?
    Ok, I get the basic idea here, and I have a question before I proceed. Would it be better/benficial/why bother to build a Javascript array using the PHP first, and then reference the different combinations of values that way? The reason I ask is since I want to update the price AND append the item number, don't we need a way to reference both columns for each option? Or should I shut up and code?
    Andy
    (Management+Coworkers)<>Logic

  • #4
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts

    The plan

    Hi Steamngn,
    Sorry for the long delay. The weekend, you know.

    I would always recommend a plan of action before proceeding. In fact, since I haven't seen any code, I have only a theoretical knowledge of what you want to do so plan is all I can help with.

    As for your very valid question, I think the answer would be interactivity. PHP knows the data, but not the choices. That happens client-side and PHP doesn't go there. And, of course, you can always interleave PHP and Javascript.

    PHP Code:
    <?php
    $fruits
    ='';
    $price='';
    while (
    $row_Fruits=mysql_fetch_array($conn)) {
    $fruits .= $row_Fruits['name'].',';
    $price .= $row_Fruits['price'].',';
    }
    $fruits substr($fruits0, -1);
    $price substr($fruits0, -1);
    echo <<<EOS
    <script language='javascript'>
    strFruits = new Array("$fruits");
    numPrice = new Array("$price");
    </script>
    EOS;
    ?>
    </head>
    <body>
    <select name="slcFruits">
    <script language = "javascript">
    for (i=0;i<=strFruits.length;i++) {
      document.write("<option value='"+numPrice[i]+"'>"+strFruit+"</option>";
    }
    </script>
    </select>
    This seperates the page from the data. If you decide to add more fruit later, just add it to the database and it will appear in the page. The code to make an associative array (fruit["name"]="banana", fruit["price"]=4.20) is not too different.

    Does this sound like a plan? You can even have a third parallel array with the two character option code that would be referenced by the select option

    Code:
    strOpCode[document.form1.slcFruit.selectedIndex]
    HTH

    2reikis

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can dynamically change the form action based on user action.
    Code:
    function updateItem(oSel){
    
      //...
    
      oSel.form.action="yourUrl.php";
      oSel.form.submit();
    }
    
    <form name="frm" action="">
    <select name="selItem" onchange="updateItem(this);">
    ...
    </select>
    <input type="submit" value="Submit to Paypal" onclick="this.form.action='paypalUrl';" />
    </form>
    Glenn
    ____________________________________

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

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Good morning all!
    Sorry for the long delay. The weekend, you know.
    Never a problem! Personal before volunteerism is A-ok!
    I spent the weekend reading up on Javascript, trying to get a grasp of how it works a bit and some of the syntax. I can see already that I will have syntax errors what with the similar-but-not-so-similar PHP and Javascript syntax.
    As for your code, I THINK it is coming close.. let me re-explain myself (with a bit more knowledge now) and see if it helps:
    The PHP SELECT query for this page joins table ITEMS and table ITEM_GRIDS; ITEMS has relevant item information and ITEM_GRIDS has grid info for each item. The query result looks like this:
    Code:
    item_no grid_1_indx grid_2_indx  grid_3_indx     prc_1  prc_2  prc_3
    -------------------------------------------------------------------------
    123      small         white     short sleeve      1.00  1.25    0.00
    123      medium        white     short sleeve      1.00  1.25    1.00
    123      large         white     short sleeve      1.00  1.00    1.00
    123      small         black     short sleeve      1.00  1.00    1.00
    123      medium        black     short sleeve      1.00  1.50    1.50
    123      large         black     short sleeve      1.50  1.50    1.50
    123      small         white     long  sleeve      1.50  1.50    1.50
    etc...
    What I am doing on the PHP side is dynamically building the <SELECT> options with a while loop, and these options (if they exist; not every item has options) are inside the dynamically built form. As for what needs to happen when there are options:
    Options are not exactly the correct term; requirements would be more like it. After the customer makes the required selections, a few things need to happen. Firstly is the price needs to be appended (item price + prc_1 + prc_2 + prc_3) each time the customer changes a selection. Second the item number needs to be appended with the option code (item_no 123 needs to become 1230100 if the first option in the grid is selected, 1230200 if second, etc.. this code is also a column in the grid table and is in the query). Finally when the customer clicks "add to cart" on the form the concatenated item number and the concatenated price need to be sent in the hidden fields in the form to paypal. Lastly (and this is optional but desirable) it would be nice if the options where also concatenated and sent in one of the hidden optional fields (small white short sleeve) as well. This would provide a good reference at checkout and also could be passed backwards as well. The only other thing that I see as a point of interest/concern is what to do if people don't have javascript enabled? Is there a way to check for that and warn the user if need be? Or am I off base on that?
    I REALLY appreciate the help from everyone. This is a new territory for me, and the guidance is GREATLY appreciated!
    Andy

    Something more! After more thought (and more reading) something obvious just hit me:
    In the table ITEM_GRIDS there is a unique column ITEM_GRID_INDX where the value is the item number with the appopriate two-digit grid code appended to it, like 1230100 for item 123 with grid one selected and grid two not selected and no grid three.
    SO....
    If we use that as the option value, then can't we use that same number to ID each row in our array and pull data accordingly?
    I have no idea how to do that, but it sounds like this would be the most logical step...
    So now I have used PHP to create a javascript array that looks like this:
    Code:
    <script language="javascript"> 
    pricearray = new Array("
    1230100,4.75,Solid White,~,~
    1230200,1,Solid Bone,~,~
    1230300,0,Solid Bisque,~,~
    1230400,0,Shell Rose,~,~
    1230500,0,Dove Gray,~,~
    1230101,9.75,Solid White,Textured,~
    ")
    </script>
    the first field is the item number+grid id, the second is the total price for the option combination, then the first option description, then the second option description and finally the third option description.
    Now for the problem:
    What I would need is code so that each time an option is changed the code looks at ALL the current values of all the options, concatenates them to the item number, finds the approprite row in the array that matchaes that number, and then returns the price value+the item price for display (and into the hidden form field), returns the array item number into the hidden item number field and returns the last three fields coupled together into the hidden custom field.
    Can this be done?
    Last edited by steamngn; 07-09-2007 at 07:16 PM. Reason: EVEN MORE INFO!!
    (Management+Coworkers)<>Logic

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok,
    I am going to take a real half-@$$ed attempt at the beginning of this (Dad always told me to be brave! )
    Does this look like it makes any sense at all:
    Code:
    <script="javascript">
    function setoptions()
    {
    for(var i=0;i<=pricearray.length-1;i++{
    if (form.option1.value == <<<how would I reference the first column in the array here>>>)
    form.amount.value = <<<how do I reference the array amount column here>>>
    <<<and how do I display this value on the page??>>>
    }
    After playing around with this a bit I notice that my array did not seem well-formatted. I changed the code to output this:
    Code:
    <script language="javascript"> 
    pricearray = new Array()
    'BS-25150100,4.75,Solid White,~,~'
    'BS-25150200,1,Solid Bone,~,~'
    'BS-25150300,0,Solid Bisque,~,~'
    'BS-25150400,0,Shell Rose,~,~'
    'BS-25150500,0,Dove Gray,~,~'
    </script>
    And I smashed my head against the desk until my Young-Frankenstien function looked like this:
    Code:
    <script type="text/javascript">
    function setOptions()
    {
    for(var i=0;i<=pricearray.length-1;i++){
    if(form.checkout.item_number.value+form.checkout.option1.value+form.checkout.option2.value+form.checkout.option3.value == pricearray[0])
    {
    form.amount.value = pricearray[1]
    }
    }
    }
    </script>
    It doesn't seem to work, but I'm having a helluva lot of fun trying!
    Andy
    Last edited by steamngn; 07-09-2007 at 10:02 PM. Reason: More Crunching of the numbers...
    (Management+Coworkers)<>Logic

  • #8
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts
    Given this:

    Code:
    <script language="javascript"> 
    pricearray = new Array("
    1230100,4.75,Solid White,~,~
    1230200,1,Solid Bone,~,~
    1230300,0,Solid Bisque,~,~
    1230400,0,Shell Rose,~,~
    1230500,0,Dove Gray,~,~
    1230101,9.75,Solid White,Textured,~
    ")
    </script>
    Code:
    <script="javascript">
    function setoptions()
    {
    fEle=document.form1.slcOptions 
    //  may help to shorten our code.
    //  This is the select element.
    //  form1 is the form name
    for(var i=0;i<=pricearray.length-1;i++) {
    if (f.options[f.selectedIndex].value == pricearray[i][0]) {
    document.form1.amount.value = pricearray[i][1]
    //Short answer
    obj = document.getElementById("dTotal");
    obj.innerHTML = pricearray[i][2]+"<br>$"+pricearray[i][1]
    }
    is, at least, a start. There's a nice quick tutorial on access select elements here

    But I'm not sure I understand the requirements.

    This grid here....

    item_no grid_1_indx grid_2_indx grid_3_indx prc_1 prc_2 prc_3
    -------------------------------------------------------------------------
    123 small white short sleeve 1.00 1.25 0.00
    123 medium white short sleeve 1.00 1.25 1.00
    123 large white short sleeve 1.00 1.00 1.00
    123 small black short sleeve 1.00 1.00 1.00
    123 medium black short sleeve 1.00 1.50 1.50
    123 large black short sleeve 1.50 1.50 1.50
    123 small white long sleeve 1.50 1.50 1.50
    etc...
    How many selects does it output? And what does each select contain? I'm having trouble with the 0.00 in prc_3 for line one. Does that mean an item number 123 in style "short sleeve" is free, or is there a base price that prc_1, prc_2, and prc_3 get added to?

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey 2reikis,
    Hope you had a great holiday weekend....
    Ok, first things first:
    How many selects does it output?
    There is only one select query, and it will output one row for each iteration of the grid for an item. (I have no control over how the data is stored, as it is export/import from third party apps) It works like this: There are 3 possible dimentions to the grid, and a row will be output for each dimention x dimention x dimention.
    So if there are 3 entries in dimention 1 (small med large) and two in dimention 2 (black white) the query will return 6 rows, 1 row for each of the following:
    small,black
    small,white
    med,black
    med,white
    large,black
    large,white
    This is kinda crappy, I know, but it is what I have to work with. I can manipulate the query as needed to add or remove columns from the result set, but the grid return will still contain the number of rows.
    I'm having trouble with the 0.00 in prc_3 for line one. Does that mean an item number 123 in style "short sleeve" is free, or is there a base price that prc_1, prc_2, and prc_3 get added to?
    Lets fix the naming and things will be much clearer:
    prc_1,prc_2 and prc_3 should be GRID_PRC_1,GRID_PRC_2 and GRID_PRC_3. Their default is 0.00; values greater than 0 will only be present if there is an extra charge for that dimention option. PRC_1 is the base price of the item, and whenever an option is changed we need to:
    PRC_1+GRID_PRC_1+GRID_PRC_2+GRID_PRC_3
    Since each row in the result set is a unique combination of available options, I "did the math" and added the values together into the second column of the array. When I posted that "grid" of data earlier I mearly entered some numbers to give you an idea of what was there; that info is fictitious, but 0 is possible.
    As for the data itself:
    The data is truly dynamic, with items added/removed daily. Any item may have 0 to 3 dimentions in a grid if options are needed. So I need to code in a way that will allow no options and will still work with three options! yippee!!
    I moved the function code to be built dynamically when the PHP is run, as we need to add only those options that are present to the item number. The problem with that is when there is only one option I need to add "00" to the end of the item number+option1 string. When there are two or three options I only need to add all the options to the string. It never ends with thing!!
    Hope I cleared up some more of this!
    Andy

    BTW!! the name of the form is "checkout"... don't we need that in there somewhere?
    Last edited by steamngn; 07-09-2007 at 10:58 PM. Reason: forgot something!
    (Management+Coworkers)<>Logic

  • #10
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts

    Question

    My first thought is why not build the variable part of the part number into the value of the select option. That would give us a single step to get the final part number and you could keep most of the logic server side where you seem to be more comfortable.

    so the select looks like

    Code:
    <select name = slcBS-251>
    <option value = 50100>Small, Black</option>
    <option value = 50200>Small, White</option>
    </select>
    Oh.... We need the price in there, too, don't we?

    Two ways come to mind; parallel arrays for the part number and aggregate price differential (which you can calculate server side on a per option basis), or putting it into the option value.

    Code:
    <option value = "4.25:50100">Small, Black</option>
    <option value = "2.75:50200">Small, White</option>
    parseFloat on this value would ignore anything after the first non-numeric character and return 4.25 and 2.75 respectively. You could retrieve the variable part number using the string function .split(":") something like...

    Code:
    <javascript language="javascript">
    f=document.checkout
    s=f.slcBS-251
    sVal = s.options[s.selectedIndex].value
    priceTotal = priceArray["BS-251"] + parseFloat(sVal)
    desc = sVal.split(":")
    document.getElementById["final"].innerHTML = desc[1]+"<br>$"+priceTotal
    f.amount.value = priceTotal
    </script>
    So your query should return a set that includes the base part number, the variable part of the part number, the aggregate price difference for that part number with those modifiers and the aggregate description for the option statement. Can you get a sample result set with those requirements?

    I'll check back in later tonight and tomorrow morning.

    2reikis

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Good Morning!(well, here anyway )
    My first thought is why not build the variable part of the part number into the value of the select option.
    I had this same thought, but then if there are THREE options for an item (remeber,that is a possibility) then the option list will be reeeeaaaaally long, and I'm sure that will cause more shoppers to make mistakes when they go to purchase.
    Oh.... We need the price in there, too, don't we?
    Yeah, that is another little "issue". Adding to the option value is fine, and that sure could be a way to finish this up....
    ...and you could keep most of the logic server side where you seem to be more comfortable.
    Weeeelllll..... while my PHP is getting quite good, any of this is proving to be challenging and enjoyable, so this is really not a concern (as long as I don't burn out my friends !)
    As far as getting a result set...
    Code:
    <script language="javascript"> 
    pricearray = new Array()
    'BS-25150100,4.75,Solid White,~,~'
    'BS-25150200,1,Solid Bone,~,~'
    'BS-25150300,0,Solid Bisque,~,~'
    'BS-25150400,0,Shell Rose,~,~'
    'BS-25150500,0,Dove Gray,~,~'
    
    </script>
    <script type="text/javascript">
    function setOptions()
    {
    f=document.checkout
    for(var i=0;i<=pricearray.length-1;i++){
    if(BS-2515+ f.option1.options[f.option1.selectedIndex].value+00 = pricearray[i][0])
    {
    form.amount.value = pricearray[i][1]
    document.getElementById("sellprc").innerHTML = "$"+pricearray[i][1]
    }
    }
    }
    
    </script>
    This is the returned code along with the returned array. I was futzing around with a simple script that would actually make the <DIV>sellprc show the price (I was ELATED!!), but I cannot get it to work with the loop and the array. Can you see something screwy with this? My instincts tell this should be close...

    As for the followup code you posted, are we getting off the idea of building an array and pulling the data we need from that? It seems like that would be the most flexible answer should a change be needed, but I am in your trusting hands as far as viability and stability goes...
    One of the reasons I like server side for the bulk of web design is the low client overhead. ISP servers are usually more than robust enough to handle this type of work in a quick fashion, while far too many client machines are not much more than a coffee maker with a promotion ! Building up the javascript and then letting the client just switch the variables around seems like the best workflow way to go....
    It is interesting to note all of the PayPal Cart-related forum posts out there, and how many of them struggle with just what we're doing. The answers are always aimed at one specific piece of this (like add a description to a custom field in the cart, but not the item number or cost), and then later the same user is posting on the PayPal site about why they can't do the next piece and how it is PayPal that has designed poorly! I say let's build the client side so that it can be modified without too much trouble and then the masses will rejoice! (oh, brother...)
    Last edited by steamngn; 07-10-2007 at 02:47 PM.
    (Management+Coworkers)<>Logic

  • #12
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts
    Just to let you know... I'm noodlin' this. I have to say, it's a fun project.

    We might start with your array. It's good as far as it goes, but to be of use to us, it will have to be taken a step further (and some syntax cleaned up)

    Code:
    pricearray = new Array('BS-25150100,4.75,Solid White,~,~',
       'BS-25150200,1,Solid Bone,~,~',
       'BS-25150300,0,Solid Bisque,~,~',
       'BS-25150400,0,Shell Rose,~,~',
       'BS-25150500,0,Dove Gray,~,~')
    so as you see we've put each line into it's own array item

    now we need to split the array into another dimension

    Code:
    for (i=0; i<pricearray.length; i++) {
      pricearray[i] = pricearray[i].split(",")
    }
    Now we have a two dimensional array with
    • pricearray[0][0] = 'BS-25150100'
    • pricearray[0][1] = '4.75'
    • pricearray[0][2] = 'solid white'
    • pricearray[0][3] = '~'
    • pricearray[0][4] = '~'


    and so on. Is this on track?

    How about a list with three modifiers so we can work up a display function based on how many selects will be needed.

    2reikis
    Last edited by 2reikis; 07-11-2007 at 04:24 AM. Reason: some noodlin' completed

  • #13
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ... I'm noodlin' this. I have to say, it's a fun project.
    Yes, it is! I seem to be thinking about it every time I am sitting quiet for a minute...
    Ok, after some housecleaning, I now have this:
    Code:
    <script language="javascript"> 
    pricearray = new Array(
    'BS-25150100,224.44,Solid White,~,~',
    'BS-25150200,220.69,Solid Bone,~,~',
    'BS-25150300,219.69,Solid Bisque,~,~',
    'BS-25150400,219.69,Shell Rose,~,~',
    'BS-25150500,219.69,Dove Gray,~,~'
    )
    </script>
    <script type="text/javascript">
    function setOptions()
    {
    f=document.checkout
    for(var i=0;i<=pricearray.length-1;i++){
     pricearray[i] = pricearray[i].split(",")
    if(BS-2515+ f.option1.options[f.option1.selectedIndex].value+00 = pricearray[i][0])
    {
    form.amount.value = pricearray[i][1]
    document.getElementById("sellprc").innerHTML = "$"+pricearray[i][1]
    }
    }
    }
    </script>
    Couple of things:
    1) Notice that the dollar value has changed in pricearray[1]; i forgot to add the base price before !
    2)Did I add the second level array split correctly?
    3)No, it still doesn't work.
    4)I will build up a three-option item today, but follow along for a second---
    The PHP for this page is fairly complex, and it builds each <SELECT>and option dynamically as needed. since this part was already done, it was a fairly simple task to insert the javascript IF statement into the PHP and build it up dynamically. Hense if we have only one option it returns
    Code:
    if(BS-2515+ f.option1.options[f.option1.selectedIndex].value+00 = pricearray[i][0])
    and if there are more than one:
    Code:
    if(BS-2515+ f.option1.options[f.option1.selectedIndex].value+ f.option2.options[f.option2.selectedIndex].value = pricearray[i][0])
    and this can go on infinitely. Since we only will ever match one row and one row only in the array we only need to build one IF statement ( I think; I'm going out on a javascript limb here! )
    One thing else that will need answering: How do I get the <DIV> to show the base price on page load or show something like "you haven't select your options" when not all of the options have been set yet? Minor, but it is one of the straggling bits...
    Keep on noodlin'!!

    10:39EST 07/11/07

    Ok, as promised, the three-option code including the entire form:
    The code:
    Code:
    <script language="javascript"> 
    pricearray = new Array('BS-1515010101,195.6,Dove Gray,Brass,Polished',
    'BS-1515010102,195.6,Dove Gray,Brass,Matte',
    'BS-1515010201,185.6,Dove Gray,Chrome,Matte',
    'BS-1515010202,185.6,Dove Gray,Chrome,Matte',
    'BS-1515010301,205.6,Dove Gray,Stainless,Polished',
    'BS-1515010302,205.6,Dove Gray,Stainless,Matte',
    'BS-1515020101,195.6,White,Brass,Polished',
    'BS-1515020102,195.6,White,Brass,Matte',
    'BS-1515020201,185.6,White,Chrome,Polished',
    'BS-1515020202,185.6,White,Chrome,Matte',
    'BS-1515020301,205.6,White,Stainless,Polished',
    'BS-1515020302,205.6,White,Stainless,Matte',
    'BS-1515030101,205.6,Arctic Granite,Brass,Polished',
    'BS-1515030102,205.6,Arctic Granite,Brass,Matte',
    'BS-1515030201,195.6,Arctic Granite,Chrome,Polished',
    'BS-1515030202,195.6,Arctic Granite,Chrome,Matte',
    'BS-1515030301,215.6,Arctic Granite,Stainless,Matte',
    'BS-1515030302,215.6,Arctic Granite,Stainless,Matte')
    </script>
    <script type="text/javascript">
    function setOptions()
    {
    f=document.checkout
    for(var i=0;i<=pricearray.length-1;i++){
     pricearray[i] = pricearray[i].split(",")
    if(BS-1515+ f.option1.options[f.option1.selectedIndex].value+form.checkout.option2.value+form.checkout.option3.value == pricearray[i][0])
    {
    form.amount.value = pricearray[i][1]
    document.getElementById("sellprc").innerHTML = "$"+pricearray[i][1]
    }
    }
    }
    
    </script>
    and the form:
    Code:
    <form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post"><center>
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="service@michaelsappliance.com">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/view_cart_02.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
    <input type="hidden" name="display" value="1">
    </center></form>
    <br>
    <form name="checkout" method="post" action="https://www.paypal.com/cgi-bin/webscr">
    <center>Quantity:<br><select name="quantity" >
    <option selected value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select><br>
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="cmd" value="_cart">
    
    <input type="hidden" name="business" value="service@michaelsappliance.com">
    <input type="hidden" name="item_name" value="Swanstone Classic 15x15x6">
    <input type="hidden" name="item_number" value="BS-1515">
    <input type="hidden" name="amount" value="185.60">
    <input type="hidden" name="no_shipping" value="0.00">
    <input type="hidden" name="handling" value="0.00">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="return" value="http://www.yoursite.com/thankyou.htm">
    <input type="hidden" name="undefined_quantity" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="tax" value="0">
    <input type="hidden" name="bn" value="PP-ShopCartBF">
    <input type="hidden" name="custom" value="">
    Choose your Color:<br><select name="option1" onchange="setOptions()">
    <option value="00">--Please Select--</option>
    
    <option value="01">Dove Gray</option>
    <option value="02">White</option>
    <option value="02">White</option>
    <option value="03">Arctic Granite(+$10.00)</option>
    <option value="03">Arctic Granite(+$10.00)</option>
    </select><br>
    
    Choose your Trim:<br><select name="option2">
    <option value="00">--Please Select--</option>
    <option value="01">Brass(+$10.00)</option>
    
    <option value="02">Chrome</option>
    <option value="03">Stainless(+$20.00)</option>
    </select><br>
    
    Choose your Finish:<br><select name="option3">
    <option value="00">--Please Select--</option>
    <option value="01">Polished(+$5.00)</option>
    <option value="02">Matte(+$12.00)</option>
    </select><br>
    
    <br><input type="image" src="http://images.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
    
    </center></form>
    Last edited by steamngn; 07-11-2007 at 03:41 PM. Reason: fixed a typo!
    (Management+Coworkers)<>Logic

  • #14
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    UPDATES!!
    Phew, what a day...
    After reading a TON of stuff on javascript arrays and playing around a bit, I've come up with the following:
    Code:
    <script language="javascript" type="text/javascript">
    var pricearray = [['BS-25150100','224.44','Solid White','~','~'],['BS-25150200','220.69','Solid Bone','~','~'],['BS-25150300','219.69','Solid Bisque','~','~']]
    </script><script type="text/javascript">
    function setOptions(){
    f=document.checkout
    l="BS-2515"+f.option1.value+"00"
    
    for(var i=0;i<=pricearray.length-1;i++){
    if (f.option1.value>"00"){
    myVal = l
    document.getElementById("sellprc").innerHTML = myVal
    }else if (f.option1.value=="00"){
    document.getElementById("sellprc").innerHTML = "No Options Selected!"
    }
    }
    }
    
    </script>
    This is almost sorta working! It sets the <DIV> element correctly, but the IF statement is wrong. Right now it is simply looking at the raw value for option1 (there is only one is this test) and displaying the var l. Var l is the correct index we need for the array, but I cannot get it to pass it in to the array and return the correct price. I've changed the array syntax around to the literal coding (not sure why, but the javascript forums seem to say that this is better) and I can reference array elements using pricearray[0][0] syntax, but I cannot get this to display using pricearray[i][0]...
    Does this help?
    Andy
    (Management+Coworkers)<>Logic

  • #15
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts

    one step at a time

    Let's work with this for just a sec as I ponder the overall.

    Your array function looks good. You might think of seperating it at the unquoted commas for readability, but hey, it's working, right?

    Code:
    var pricearray = [
      ['BS-25150100','224.44','Solid White','~','~'],
      ['BS-25150200','220.69','Solid Bone','~','~'],
      ['BS-25150300','219.69','Solid Bisque','~','~']
    ]
    the main thing is, you've discovered how to make a multi-dimensional array, on the fly, and all at once.

    Hey, I'm learning too!

    Next there's this line...

    Code:
    if (f.option1.value>"00"){
    Since we're dealing with strings, it's probably best to go with Javascript's not-equal operator to avoid gremlins.

    Code:
    if (f.option1.value != "00") {
    Also, you need to start thinking of select tags as arrays with the options as the members. It's really an object. The object has a property selectedIndex that points to which of it's options is currently selected. The object also has a collection called options that contains option objects. To get to the final bit of juice that we want, we need to go a little deeper.

    Code:
    if (f.option1.options[f.selectedIndex].value != "00") {
    is how to get the value of the selected option. This is different than posted forms. With a posted form being processed by PHP, the choices have been made and $_POST['option1'] has been resolved to a single value. In the browser, nothing's set in stone till the user clicks submit.

    Also, why not just use the else statement. Since we're dealing with either/or how about

    Code:
    for(var i=0;i<=pricearray.length-1;i++){
      if (f.option1.options[f.option1.selectedIndex].value!="00"){
        myVal = pricearray[i][1]
        document.getElementById("sellprc").innerHTML = l + "<br>" + "$" + myVal  }
      else
      {
        document.getElementById("sellprc").innerHTML = "No Options Selected!"
      }
    }
    more to come later tonight. Boss is calling

    2reikis


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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