Question

I have my form like this:

• Product dropdown
• Quantity text field
• UnitPrice display
• TotalPrice display

I have created a function to display the unitprice by querying the db when the dropdown is selected. Now i wanted to be able to display the TotalPrice when the quantity is typed in by multiplying the quantity and the UnitPrice. Understand that the below is the way to multiply but how do i apply it in my query. Included my code too.

<script>
function showUP(str)
{
if (str=="")
{
document.getElementById("UP").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("UP").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getunitprice.php?q="+str,true);
xmlhttp.send();
}
function multiply(Quantity)
{
var totalPrice= parseFloat(document.getElementById("UP"))*Quantity;
document.getElementById("TP").innerHTML= totalPrice;
}
</script>


    <table><tr>
    <th width-"18%>Quantity:</th>
    <td width="60%">
        <input type-"text" name="Quantity" value="" onkeyup= "multiply (this.value)" size="60" />
    </td>
    </tr></table>
<p></p><div id="UP"><b>UnitPrice: 0.00 </b></div><p>
<p></p><div id="TP"><b>TotalPrice: 0.00 </b></div><p>

getunitprice.php

<?php
 $q=$_GET["q"];

 $con = mysql_connect('localhost', '', '');
 if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

 mysql_select_db("db", $con);

 $sql="SELECT CostPrice FROM Product WHERE ProductCode = '".$q."'";

 $result2 = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());

 while($row2 = mysql_fetch_array($result2)) {

 echo "<b>UnitPrice: ".$row2['CostPrice']."";


 }

    mysql_close($con);
       ?> 

Answer 1

Use onBlur instead of onchange event. You can also use onkeyup event on quantity textbox.

<script>
function multiply(qty)
{
    var totalPrice= parseFloat(document.getElementById("UP").innerHTML)*qty;
    document.getElementById("TP").innerHTML= totalPrice;
}
</script>

        <tr>
        <th width-"18%>Quantity:</th>
        <td width="60%">
        <input type-"text" name="Quantity" value="" onkeyup= "multiply (this.value)" size="60" />

        </td>
        </tr>

<p></p><div><b>UnitPrice: <span id="UP">0.00</span> </b></div><p>
<p></p><div id="TP"><b>TotalPrice: 0.00 </b></div><p>