如何获得所选产品的价格并在桌面上显示？

Question

so the requirement is to have a table which allows the user to create a new estimate online. I went as far as adding rows/ deleting them, having my DB's product list on the product field. But once I select the product, I would like the field 'Price' to pull up its price.

Here's the code I am currently using:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country" onchange="getPrice(this.value, this.closest('tr').rowIndex);">
                <?php while($row = mysql_fetch_array($query)) { 

                echo '<option value="' .$row['nom'] . '">'.$row['nom'].'</option>'; }

                ?>


            </SELECT>
        </TD>

        <TD><INPUT type="text" name="txt"/></TD>


    </TR>
</TABLE>

Answer 1

Ok, so what I assume is that your javascript function getPrice(name, tablecell) should retrieve the price stored in your database and puts it's price-value into the given table cell.

Before I write out a possible solution, I would like to add: This solution will keep the values from the database in a client-side array. Thus visible for any user, reviewing the code of your page. This shouldn't be an issue if you only store non-critical information though.

// For testing purpose i filled in a mini-json, but in  
// the PHP-example later this post you will find a short
// example how to fill this with PHP from your database
var prices = { 
  'test_prod_1' : 16.46, 
  'test_prod_2' : 21.55,
  'test_prod_3' :  7.4
};


function getPrice( prodID, tableCell )
{
  if (typeof prices[prodID] !== 'undefined')
    tableCell.innerHTML  = '€' + prices[prodID];  // Get the price from the pre-loaded price information
  else
    tableCell.innerHTML  = '?';
    
}

<input type="button" value="click me" onClick="javascript:getPrice('test_prod_2', document.getElementById('test_cell'));">

<table border=1 cellspacing=0 cellpadding=5>
  <tr>
    <td>Product name</td>
    <td>price</td>
  </tr>
  
  <tr>
    <td>test</td>
    <td id="test_cell"></td>
  </tr>
</table>

And then with PHP You would be able to create this price list dynamically. But, remember that the data is visible client side, so this example will only select the price and name/id data. Make sure to edit the variable names to the ones you use.

<script type="text/javascript">

    var prices = <?php

    $js_pricelist = array();

    // Retireve the information from the server's database. Assume that $result is a result set in an ASSOC
    foreach( $result as $row )
        $js_pricelist[ $row['prodID'] ] = $row['prodPrice'];

    echo JSON_Encode( $js_pricelist );

    ?>
</script>

Please check the last script as I haven't tested it yet, and is meant more to give you an idea of the possibilities

Conclusion: The main idea is, that once you load the page, you assemble a javascript object containing all price data (Using PHP). You echo this object to a javascript block, and make a function that reads from this newly created array/object to retrieve the price that corresponds to the product_id.

</div>