Home/ Questions/Q 6795149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:18:31+00:00

Here is a jsfiddle that is working except for the function I’m trying to

  • 0

Here is a jsfiddle that is working except for the function I’m trying to figure out.

I have this code that .appends a .table to a form on a value change in the .qty field. I’m trying to figure out 2 things.

The first is that only ONE extra line may be available at any time.

The second would be to remove that one extra line when the #extraDiscount has .focusin.

Here’s the JQuery.

    var TheOrderLine = ('<table class="orderLine formFont" width="400" hspace="0" vspace="0"><tr><td width="75" valign="top">Name:<input class="ProductName" type="text" size="6"></td><td width="75" valign="top">WholeSale:<input class="WholeSalePrice" type="text" size="6"></td><td width="75" valign="top">QTY:<input class="qty addLine" type="text" size="6"></td><td width="75" valign="top">L/Total:<input class="lineTotal" type="text" size="6"><br></td><td width="100" valign="top"><div id="delButton">DEL</div></td></table>');

$(document).ready(function(e) {
 //This adds the Line Totals 
});function updateTotal() {
    var totalA = 0;
    $('.lineTotal').each(function() { totalA += parseFloat($(this).val()) || 0; });
    $('#productTotals').val(totalA.toFixed(2));
}
 //This is the autocomplete and is working fine
$(function() {
$('.ProductName').val("");
$('.WholeSalePrice').val("");

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

// Used a CSS button for the Delete line
$("#orderFormDiv_Lines").delegate("#delButton", "click", function () {
    $(this).closest('.orderLine').remove();
    updateTotal(); /* this recalculates the total after an item is deleted */
});
// Removes all lines
     $("#removeAll").click(function () {
     $('.orderLine').remove();
     $('#productTotals input[type="text"]').val('');
     updateTotal();
    });


$(document).ready(function(e) {
    $('.qty').live({
        change: function() {
/* This add the numbers for lineTotal field */    

            var qty = $(this).val();
            var $tr = $(this).closest('tr');    
            var WholeSalePrice = $('.WholeSalePrice:eq(0)', $tr).val();

            var lineTotal = parseFloat(qty * WholeSalePrice) || 0;
            $('.lineTotal:eq(0)', $tr).val(lineTotal.toFixed(2));;
            updateTotal();

// this is the line that I need to add the if function on but I can't figure out how to find the  extra empty table rows that may exist and also not let 

           $('#orderFormDiv_Lines').append(TheOrderLine);

         // I'm thinking something along this line here but I can't grasp the .live concept for grabbing the empty .orderlines.


            /*   
            if ('.orderLine':empty) && > 1; {

            $('.orderLine').remove();


            } else {

                 $('#orderFormDiv_Lines').append(TheOrderLine);
            }
         */     }


        })
// Added this in case the Delete All button is used.        
        $('#addLine').click(function(){
        $('#orderFormDiv_Lines').append(TheOrderLine); 
    });
});

Here’s HTML form….

    <html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div id="orderFormContent">
<div id="orderFormDiv_Lines">

<table class="orderLine formFont" width="400" hspace="0" vspace="0">
   <tr>
    <td width="75" valign="top">
Name:<input class="ProductName" type="text" size="6"></td>
    <td width="75" valign="top">
WholeSale:<input class="WholeSalePrice" type="text" size="6"></td>
    <td width="75" valign="top">
QTY:<input class="qty addLine" type="text" size="6"></td>
    <td width="75" valign="top">
L/Total:<input class="lineTotal" type="text" size="6"><br></td>
    <td width="100" valign="top">
<div id="delButton">DEL</div>
    </td>
   </table>
</div>
<div id="orderFormDiv_BottomRight"><br>
    <table width="100%" border="1">
      <tr>
        <td>#extraDiscount</td>
        <td><input id="extraDiscount" type="text" size="10"></td>
      </tr>
      <tr>
        <td>#totalDiscounts</td>
        <td><input id="totalDiscounts" type="text" size="10" disabled></td>
      </tr>
      <tr>
       <td>#productTotals</td>
        <td><input id="productTotals" type="text" size="10" disabled></td>
      </tr>
    </table></div>
<br>

<p class="clear"/>
</div>
<div id="removeAll">Delete All</div><br><br>
<div id="addLine">Add Line</div>
<hr>
<br></div>
</form><hr>
</body>
</html>

Any help would be AWESOME!!! Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    to limit appending only 1 line for .orderLine change your click function to 

    $('#addLine').bind('click', function(){
    if($('.orderLine').length == 0)
        $('#orderFormDiv_Lines').append(TheOrderLine); 
});

    and to remove the line when discount is focused :

    $('#extraDiscount').bind('focus', function(){
    $('#orderFormDiv_Lines table').each(function(){
        var hasInput = false;
        $(this).find('input').each(function(){
            if($(this).val() != '')
                hasInput = true;
        });
        if(!hasInput) $(this).remove();
    }); 
});
    • 0