Interfacing html, javascript, php and mysql

Question

Below is an order form that I have been working on to learn how html, javascript, php and mysql interact with each other.

https://www.dropbox.com/s/7zpok07w1bygu60/Screen%20Shot%202012-08-12%20at%2010.28.41%20AM.png

The goal of this table is to have the user input a number in the quantity field and on the change, javascript will automatically update the total cost of that particular product. The kicker is that I want the list to be populated from a mysql database table.

Here is the html, javascript and php code that I am using.

HTML

<table>
<tr>
    <td>
        Product
    </td>
    <td>
        Description
    </td>
    <td>
        Quantity
    </td>
    <td>
        Price
    </td>
    <td>
        Total Cost
    </td>
</tr>

<?php include("pop_prodlist.php"); ?>
<tr>
    <td>Totals</td>
    <td></td>
    <td>TotalQuantity</td>
    <td></td>
    <td>TotalCost</td>
</tr>
</table>

PHP

    while($row = mysql_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['P_Name'] . "</td>";
    echo "<td>" . $row['P_Description'] . "</td>";
    echo "<td>
    <input type='text' size='3' name='" . $row['P_Name'] . "_Quantity'
      onChange='calcCost()'/>
    </td>";
    echo "<td>" . $row['P_Cost'] . "</td>";
    echo "<td id='" . $row['P_Name'] . "_Cost'>0.00</td>";
    echo "</tr>";

}

Javascript calcCost() function

    function calcCost()
    {

      var theForm = document.forms['productform'];

    /*
    COMMENTED OUT FOR TIME BEING
    var pquan = theForm.elements[productname + '_Quantity'].value;
    var costperquan = '15.99';
    var ptotalcost = costperquan * pquan;
    */

     var divobj = document.getElementById('Basketball_Cost');
     divobj.innerHTML = "helloworld";

    }

The issue that I am currently having is that I cannot figure out how to place an unique argument into the javascript function calcCost from the php script echo depending on the product name decided from the mysql query.

Also, for the sake of educating myself, I am curious as to what a better solution would be/look like. I doubt that this is the most elegant solution to the problem and I would like to see some better solutions.

Answer 1

Jay, it seems like you understand how PHP, MySQL and JavaScript work together - that is good.

Personally, I can really reccommend using jQuery (JavaScript Library). It is widely used all over the web, very common, powerful and easy to understand and use. Although there are people that say it is not good to use a library of a language, before you know the language, jQuery helped me to understand JavaScript better because of its easy to follow syntax.

So, to use jQuery, you just need to add the source scripts in your html file. Why do I recommend jQuery? It will also allow you to use ajax (loading content, also from the database, without having the page to refresh) very easily.

jQuery will also allow you to separate your click events from your HTML. Basically you assign an id or class attribute to the HTML elements and this is your reference in your js, so no onclick="" required.

As for your HTML: it is highly recommended to not use table-layouts. In a time of HTML5 and CSS3 there are excellent replacements for tables.

If you need more help let me know in the comment, I'm glad to help...