CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Sourav Sarkar
Sourav Sarkar

Reputation: 292

PHP generated html text box to calculate amt=qty* price

$res=mysql_query($qry);
while($row= mysql_fetch_array($res))
{
echo "<tr><td>".$row['Food_Name']."</td>
<td>".$row['Price']."</td>
<td><input type='text' name='qty". $row['code']."[]' size='2'/></td>                               
<td><input type='text' name='amt". $row['code']."[]'  size='2'/></td>    
     </tr> 
}

This is the Output of the php code

I have write this code to display the food_name and price, and display two textboxes for qty and amt. Now I need to calculate price*qty and display the result in amt box.

please help., javascript, php, ajax, jquery anything only the result should appear. The table is displaing on a popupoverlay jquery.

<tr>
<td>Mutton Kasha</td>
<td>250</td>
<td><input type='text' name='qtySPJ1[]' size='2'/></td>                            
<td><input type='text' name='amtSPJ1[]'  size='2'/></td>
</tr>

<tr>
<td>Mutton Butter Masala</td>
<td>850</td>
<td><input type='text' name='qtySPJ1[]' size='2'/></td>                            
<td><input type='text' name='amtSPJ1[]'  size='2'/></td>
</tr>

Upvotes: 0

Views: 712

Answers (3)

Zahid Saeed
Zahid Saeed

Reputation: 1171

It's pretty easy. You can do something like this:
PHP Code

$res=mysql_query($qry);
while($row= mysql_fetch_array($res)){
    echo "<tr><td>".$row['Food_Name']."</td>
        <td class=\"price\">".$row['Price']."</td>
        <td><input type='text' class=\"qty\" name='qty". $row['code']."[]' size='2'/></td>                               
        <td><input type='text' class=\"amt\" name='amt". $row['code']."[]'  size='2'/></td>
    </tr> 
}

Now in your jQuery. Add this:

$(document).ready(function(){
    var qty = $("input.qty"),
        price;
    qty.on("input", function(){
        var $this = $(this);
        price = +($this.closest("td").siblings("td.price").text());
        $this.closest("td").siblings("td.amt").val(price*(+$this.val()));
    });
});

You can also use other events such as Blur. Hope that works :)

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

This will give you a basic idea of what you can do:

$('input.qty').change(function(){
    var $tr = $(this).closest('tr');
    var price = parseFloat($tr.find('td').eq(1).text());
    var amt = parseInt($(this).val());
    $(this).closest('tr').find('input.amt').val(amt * price);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/hfakf6zr/1/

This listens for changes to inputs with class="qty" and updates the amount accordingly.

Upvotes: 1

Sabyasachi Mishra
Sabyasachi Mishra

Reputation: 1749

try this

function multiply() {
   var txtFirstNumberValue = document.getElementById('txt1').value;
   var txtSecondNumberValue = document.getElementById('txt2').value;
   if (txtFirstNumberValue == "")
       txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
       txtSecondNumberValue = 0;

   var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
   if (!isNaN(result)) {
       document.getElementById('txt3').value = result;
   } 
}

Upvotes: 0

Related Questions