Change price variable based on a dropdown selection with php and jquery

Question

Problem: How can i get the selected price from a dropdown menu and use it instead of the original price of the current product stored in the database?

My approach: I've been able to update a label with the selected price, but I still need to override the current price of the product. I'm pretty clueless right now.

Additional information: The current price saved in the database is $price which need to be overridden by either $prijshalf or $prijsheel that are both also stored in the database.

The JQuery Code for updating the label:

<script type="text/javascript">
      $(document).ready(function() {
            $('.dropdown').change(function() {
                var price = 0;
                $('.dropdown').each(function() {
                    if($(this).val() != 0) {
                        price = parseFloat($(this).val());
                    }
                });
                $('#costLabel').text('€ ' + price.toFixed(2));
            });
        });
</script>

This code block gets the value of the selected dropdown menu item and puts it in the label #costLabel

The PHP Code for rendering the products:

$product_list = "";

while($row = mysql_fetch_array($results)){ 
         $id = $row["id"];
         $product_name = substr($row["product_name"],0,25);
         $price = $row["price"];
         $category = $row["category"];
         $subcategory = $row["subcategory"];
         $beschrijving = substr($row["details"],0,25);
         $afbeelding = '<img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="50" height="50" />';
         $dropdown = $row["dropdown"];
         $dropdown2 = $row["dropdown2"];
         $prijshalf = $row["prijshalf"];
         $prijsheel = $row["prijsheel"];
         if($dropdown != "" || $dropdown2 != ""){
         $dropdownshow = "<select name='dropdown' id='dropdown' class='dropdown'>
                                      <option name='prijshalf' value='$prijshalf'>$dropdown</option>
                                      <option name='prijsheel' value='$prijsheel'>$dropdown2</option>
                         </select>";
             }
         else{
                $dropdownshow = ""; 
         }
         $product_list .= "<div class='produkt'>
                           <div class='hardlopers'>
                           $afbeelding
                           <div class='subinfo'>
                           <span class='prijs-info'>Prijs:</span><span class='prijs'><label id='costLabel' name='costLabel'>$price</label>  </span>
                           <span class='productnaam'>$product_name</span>
                           <span class='dropdown'> 
                            $dropdownshow
                           </span>    
                           <form id='form1' name='form1' method='post' action='homepage.php#redirect'>
                           <input type='hidden' name='pid' id='pid' value='$id' />
                           <input type='submit' name='button' id='button' value='' />
                           </form>
                           <span class='info'></span>
                           </div>
                           </div>
                           </div>
                           ";   

}

// Prints out the products to screen
echo $product_list;

Answer 1

I can't see how is your process of adding an item to the cart, so i can't tell you how. But you can try to move the dropdown into the <form> tag, later with php you get the value and if it is prijshalf or prijsheel do the math. The same with js, put the selected value of the dropdown in a hidden input within the <form> if you doesn't want the dropdown into the <form>, but i don't see why it shouldn't, send it to the server and do the math there. All is up to you.

Always use js just to show the info, always do the calculation and validation with php in the server for security reasons.

Happy coding