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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Update Price on Selection

    I'm currently making an online shop using php. I don't know any javascript but I'm not bad with php so I can analyze a script and probably work out what it does (javascript). Here's what I want to do. When a user selects a different weight, I want it to update the displayed price. However, there will be multiple products on a page so the script has to work for many products and not just one. I suggest you copy the below table into something like dreamweaver.

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight1" name="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price1' width="38%">$15.00</td>
    </tr>
    </table>
    <br />
    <br />
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight2" name="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price2' width="38%">$15.00</td>
    </tr>
    </table>
    How hard would it be to change the displayed price when the user selects a different weight? It will be cosmetic only. I understand that javascript uses element ID's for things like this. You'll notice in the above tables that I've set the weight and price id's differently between the price id's and the weight id's. If someone could write me a little script to do this for the above html, then that would be really awesome and much appreciated.

    Cheers!

  • #2
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The way i do this is through AJAX on mysite, but for your script you would need to add the price to the value on the select field, then just call a function on change like changevalue("1", this.value)

    then the script would be like
    Code:
    function changevalue(ID, NEWAMOUNT){
      document.getElementById("price"+ID).value = NEWAMOUNT;
    }
    that should help you
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's another possibility

    PHP Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <
    tr>
    <
    td width="23%" valign="middle">Weight:</td>
    <
    td width="39%" align="left" valign="middle">
    <
    form method="post" action="">
    <
    select id="weight1" name="weight" style="width:108px;" onchange="document.getElementById('price1').innerHTML=this.value.split(',')[1]">
    <
    option value="1kg,$14.00">1kg ($15.00)</option>
    <
    option value="500g,$10.00">500g ($10.00)</option>
    <
    option value="250g,$7.00">250g ($7.00)</option>
    </
    select>
    </
    form>
    </
    td>
    <
    td id='price1' width="38%">$15.00</td>
    </
    tr>
    </
    table>
    <
    br />
    <
    br />
    <
    table width="100%" border="0" cellspacing="0" cellpadding="3">
    <
    tr>
    <
    td width="23%" valign="middle">Weight:</td>
    <
    td width="39%" align="left" valign="middle">
    <
    form method="post" action="">
    <
    select id="weight2" name="weight" style="width:108px;" onchange="document.getElementById('price2').innerHTML=this.value.split(',')[1]">
    <
    option value="1kg,$14.00">1kg ($15.00)</option>
    <
    option value="500g,$10.00">500g ($10.00)</option>
    <
    option value="250g,$7.00">250g ($7.00)</option>
    </
    select>
    </
    form>
    </
    td>
    <
    td id='price2' width="38%">$15.00</td>
    </
    tr>
    </
    table
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That seems pretty could Mr J. I like the simplicity. It will be fairly easy to work with too. I was thinking that the only downside is that the price is in the value (so when I process it I'll have to get php to do a little extra work to isolate the weight), but that also has it's advantages as when I insert the weight value from the database, I can also insert the price in the same spot meaning the code will be a bit cleaner.

    Thankyou very much mate!

  • #5
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just get php to explode the variable with the , and there you go, 2 lines of code max
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by neomaximus2k View Post
    just get php to explode the variable with the , and there you go, 2 lines of code max
    Yeah exactly - Thanks again.


  •  

    Posting Permissions

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