dynamic options price calculator

[oh2labs]

this one is driving me nuts so I hope you guys can school me a bit.

My goal is to create a multiple-option dynamic pricing sheet for a product page. The concept I have is that all the information for the product is inserted in the database via relative tables. There is one table for each product where I include the basic info (id, name, description, base cost, etc) where each item will get one row. Then the relative table is for each option available (id, pid [the id for the product in the previous table], option name [such as for size 2oz], value [the additional cost for this option], option group [3 choices, a, b and c for determining which dropdown group this option belongs to]. This turned out to be like this:

php:

  $a_sql = ("SELECT * FROM prod_add WHERE pid = '$id' AND `group` = 'a'");
         $a_query = mysqli_query($dbconx, $a_sql);
         $a_Count = mysqli_num_rows($a_query);
            if ($a_Count > 0) {



              while($row = mysqli_fetch_array($a_query)) {

              $a_option = $row["option"];
              $a_value = $row["value"];

              $a_results .= "<option>$a_option [+ $ $a_value]</option>";

    }

}

Which works well enough, the html for the dropdown is currently (but has been changed a lot based on the many javascript attempts i have made):

<div class="left_col">
          <h3 id="price"></h3>
          <?php echo $a_opt; ?><br />
          <?php echo $b_opt; ?>
    </div>

The javascript is what is hanging me up the most (and i know I have to cleanse variables, clean up html get rid of the breaks, etc I just want it to work then I'll clean everything up as needed). I've tried all sorts of code that I've found relevant to multiple drop downs etc, but nothing has worked. I believe it's because I'm dynamically rendering the information, but basically I need to have up to 3 drop downs created based on the groups where each selected update creates a real time update of the price. The base price is dynamic from the first table (say $100) and then the options each have a value (say $10) so when I select that option the price shows $110. I've found this tutorial http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml which is fantastic but it isn't working properly with dynamic content, but it's very close to what I am attempting. Hope this is clear and sorry for the book but I just want to be as clear as possible. Thanks!

[pixelsoul]

What about the tutorial is not working for you? It shouldn't really matter weather you generate an array of products with prices using PHP, or put it static on the page. The Javascript is just using what exists in the DOM, and that won't change without a page reload, or if Javascript changes it.

As long as PHP is doing what it is supposed to be doing and rendering the page correctly, then I would take the source of the rendered page and work with the Javascript to get it working properly with the existing elements.

[oh2labs]

the php echos and dumps correctly so I'm sure it's not a php error, perhaps there is something wrong with the javascript? I'm decent with php and html, but js is my achilles heel.

[pixelsoul]

That is my point. So take the rendered HTML that you have on the page, and then work directly with that to get the Javascript working the way you want. Javascript doesn't know/care if the page was put together using PHP, it interacts with the DOM.

If you have a public test page that could be reached, or post just the HTML that is rendered on the page and your Javascript, then we might be able to help more. Without seeing that, this conversation is based on theory.

[oh2labs]

http://jsfiddle.net/DMqAa/2/ This is the general idea right here

[oh2labs]

Are there ways to debug with javascript like php error reporting or anything like that btw?

[pixelsoul]

There are a lot of different Javascript debugging tools out there. The most basic is using the console, which is on most modern browsers. You can output to the console using console.log(someValue) to see what a var or function might return. I use Firefox addons Firebug, Web Developer and then of course the standard Developer Tools in Chrome.

As for your code, I would make a suggestion and do somthing like this
http://jsfiddle.net/pixelsoul/CNGMv/

If I am using PHP and I am pulling my data from a database, I would usually let it handle most of the logic, etc. Javascript is more for presentation layer stuff (unless you're using NODE).

My example/suggestion of the way I would write this is very simplistic, and doesn't require I maintain an array in Javascript of values. I just let PHP populate all of that and then I let Javascript do all the lightweight stuff.

I left the console.log lines in there for you to see.

[oh2labs]

Oh yeah, that's extremely simple and does exactly the same thing. I narrowed down the last code to saying getTotal wasn't define which it was, but I'm assuming the code was broke somewhere else. This is much simpler and if it were to ever break it would be easier to find the kink. Thank you!