Computing values on keyup using jQuery
The script below computes the subtotal and total of given items.
<script type="text/javascript">
$(function(){
$('input[type=button]').click(function(){
});
$('input[id^=qty]').keyup(function(){
var gtotal=0;
var parentDiv = $(this).closest('#korokor');
var curprice=parentDiv.find('input[id^=price]').val();
var curqty= this.value;
var curtotal=curprice * curqty;
parentDiv.find('input[id^=subtotal]').val(curtotal);
$('input[id^=subtotal]').each(function(index) {
var currentnum= $(this).val();
var intnum =parseInt(currentnum);
gtotal=gtotal + intnum;
});
$('input[name=supertotal]').val(gtotal);
$('input[name=payment]').val(gtotal);
});
});
</script>
<?php
$viewcarter=mysql_query("SELECT * FROM prod_table WHERE CURRP=1");
?>
</head>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>QA</th>
<th>PRICE</th>
<th>QTY BUY</th>
<th>SUBTOTAL</th>
<th>REMOVE</th>
</tr>
</table>
<?php
if(mysql_num_rows($viewcarter)==0){
//no products
}else{
while($row=mysql_fetch_assoc($viewcarter)){
?>
<form name="blabber" method="get" action="expander.php">
<div id="korokor">
<table border="1">
<tr>
<td><?php echo $row['PID']; ?></td>
<td><?php echo $row['PRODUCT']; ?></td>
<td><?php echo $row['QTYHAND']; ?></td>
<td><?php echo $row['S_PRICE']; ?></td>
<input type="hidden" id="pids" name="ids[]" value="<?php echo $row['PID']; ?>">
<input type="hidden" id="pname" name="product[]" value="<?php echo $row['PRODUCT']; ?>">
<input type="hidden" name="dprice[]" value="<?php echo $row['B_PRICE']; ?>">
<input type="hidden" name="sprice[]" id="<?php echo 'price'.$row['PID']; ?>" value="<?php echo $row['S_PRICE']; ?>"/>
<input type="hidden" name="qoh[]" value="<?php echo $row['QTYHAND']; ?>"/>
<td><input type="text" name="qbuys[]" id="<?php echo 'qty'.$row['PID']; ?>"/></td>
<td><input type="text" name="subtotal[]" id="<?php echo 'subtotal'.$row['PID']; ?>"/></td>
<td><a href="pagmasdan.php?action=2&id=<?php echo $row['PID']; ?>"><img src="delete-icon.png"></img></a></td>
</tr>
开发者_如何学Go</table>
</div>
<?php
}
?>
Grand Total:<input type="text" name="supertotal" value=""/><br/>
Customer:<input type="text" name="customer" value=""/><br/>
Payment:<input type="text" name="payment" value=""/><br/>
<input type="submit" value="sell"/>
</form>
<?php
}
?>
It works, but I have a little problem with its appearance:
I tried to place them all in one table to make it more pleasing but the script which computes the values at keyup no longer works. I need a little help in modifying the appearance of the interface.
Use a single table...
<form name="blabber" method="get" action="expander.php">
<div id="korokor">
<table border="1">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>QA</th>
<th>PRICE</th>
<th>QTY BUY</th>
<th>SUBTOTAL</th>
<th>REMOVE</th>
</tr>
<?php
if(mysql_num_rows($viewcarter)==0){
//no products
}else{
while($row=mysql_fetch_assoc($viewcarter)){
?>
//now the loop adds a new row rather than new table for each item in the cart.
<tr class="cartItem">
<td><?php echo $row['PID']; ?></td>
<td><?php echo $row['PRODUCT']; ?></td>
<td class="qnty"><?php echo $row['QTYHAND']; ?></td>
<td class="unitPrice"><?php echo $row['S_PRICE']; ?></td>
<td><input type="text" name="qbuys[]" id="<?php echo 'qty'.$row['PID']; ?>"/></td>
<td><input type="text" name="subtotal[]" id="<?php echo 'subtotal'.$row['PID']; ?>"/></td>
<td><a href="pagmasdan.php?action=2&id=<?php echo $row['PID']; ?>"><img src="delete-icon.png"></img></a>
<input type="hidden" id="pids" name="ids[]" value="<?php echo $row['PID']; ?>">
<input type="hidden" id="pname" name="product[]" value="<?php echo $row['PRODUCT']; ?>">
<input type="hidden" name="dprice[]" value="<?php echo $row['B_PRICE']; ?>">
<input type="hidden" name="sprice[]" id="<?php echo 'price'.$row['PID']; ?>" value="<?php echo $row['S_PRICE']; ?>"/>
<input type="hidden" name="qoh[]" value="<?php echo $row['QTYHAND']; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
</div>
That should fix much of the layout, having loads of tables as you were trying to do is just not a good idea. If the javascript is not working with a single table then it should be adapted so that it does.
I will take a look at that now...
This is only very rough im afraid (contact lenses dried out all of a sudden).. but
var runningSub = 0;
var total = 0;
$('.cartItem').each(function(){
var qnty = $('this .qnty').html();
var unitPrice = $('this .unitPrice').html();
runningSub + (qnty * unitPrice);
)};
// the cart items have been processed so..
if(runningSub >0){
total = (calc for the total price)
}
// Now you can set your values..
If you run the above with the additions needed to work out the final total and to put the values onto your page you might have something that works.. or at least a good idea of a direction to go in to get there..
please look at the HTML for the table as I have amended it to make the javascript simpler to write.
精彩评论