Home/ Questions/Q 6799479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:51:12+00:00

I’m trying to add the functionality to this dynamic order form that will auto

  • 0

I’m trying to add the functionality to this dynamic order form that will auto sum the field data.
Here’s what I’m trying to accomplish…enter image description here

The form works like this…
field1 is setup with .autocomplete with $(this) to .append a new line. It adds a new line when you .focusin on the qty field. I would like to add the functionality of adding all the dynamically generated lines to add the subTotals and then add all the subTotals to the orderTotal.

HERE’S MY CODE:

<html>
<head>
<?php include '../_includes/jq.inc.php';?>

</head>
<body>

<button id="removeAll">Delete All</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post">
<br><br><br><br><br>
<div id="orderForm">
<table class="orderLine" >
 <tr>
    <td bgcolor="#CCCCCC">field1<br><input class="field1" type="text" size="15"></td>
    <td bgcolor="#999999">field4<br><input type="text" class="field4" size="15"></td>
    <td bgcolor="#CCCCCC">qty<br><input class="qty addLine" type="text" size="15"></td>
    <td bgcolor="#999999">subTotal<br><input class="subTotal" type="text" size="15"></td>
    <td><button class="OFDeleteButton">Delete</button></td>
  </tr>
</table>

</div><br>

<table width="434" >
  <tr>
    <td width="482">orderTotal<input id="orderTotal" type="text" size="15"></td>
  </tr>
  </table>
<input name="" type="submit" value="Place Order">
</form>

<script type="text/javascript">
$(function() {

$('.field1').val("");
$('.field4').val("");

$(document).ready(function(e) {
    $('.field1').live({
        focusin: function() {
            $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    var $tr = $(this).closest('tr');
                    $tr.find('.field1').val(ui.item.field1);
                    $tr.find('.field4').val(ui.item.field4);
                    }
                })
                }
            });
        }); 
});

$("#orderForm").delegate(".OFDeleteButton", "click", function () {
    $(this).closest('.orderLine').remove();
});
<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
$(document).ready(function(e) {
    $('.qty').live({
        change: function() {
            $('#orderForm').append('<table class="orderLine"><tr><td bgcolor="#CCCCCC">field1<br><input class="field1" type="text" size="15"></td><td bgcolor="#999999">field4<br><input type="text" class="field4" size="15"></td><td bgcolor="#CCCCCC">qty<br><input class="qty addLine" type="text" size="15"></td><td bgcolor="#999999">subTotal<br><input class="subTotal" type="text" size="15"></td><td><button class="OFDeleteButton">Delete</button></td></tr></table>');
            }
        })
});
</script>
</body>
</html>

What do I need to do in order to add the fields the way I want and have it work dynamically as new lines are added or removed. Thanks in advance!

EDIT

Here’s what I have on it right now… 

$(function(e) {
    $('.subTotal').live({
        focusin: function() {
            updateTotal();
            }
        })
});

I intend on “disabling” the subTotal field so it can not be altered. So what would I use to replace the focusin on the subTotal to make the function() run? Is there somthing other than change that would work??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your change event handler for .qty, you could find the the corresponding price, and calculate the subtotal. Given that it is bound using .live(), it should apply to new rows as they are created.

    var qty = $(this).val();
var $tr = $(this).closest('tr');
var price = $('.field4:eq(0)', $tr).val();
var subTotal = parseFloat(qty * price) || 0;
$('.subTotal:eq(0)', $tr).val(subTotal.toFixed(2));
updateTotal();

    Where updateTotal is a function that updates the order total.

    function updateTotal() {
    var total = 0;
    $('.subTotal').each(function() { total += parseFloat($(this).val()) || 0; });
    $('#orderTotal').val(total.toFixed(2));
}
    • 0