Question

There is a one section of orders page where users can add new fields to add new products. The problem here is, every time user adds new fields, new fields should have names as PRODUCTNAME1, PRODUCTNAME2, PRODUCTNAME3, and so on. Right now, every new field added has 1 value. Its stuck there. I hope I made some sense.

$('#AddProduct').click(function() {
    var i = 0;
    var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    
    $('#OrderProducts').append(adding);

    adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
        selectFirst: false
    }).result(function(event, data, formatted) {
        if (data) {
            adding.find(".UNITPRICE").val(data[1]);
            adding.find(".UNITPRICE").html(data[1]);
            adding.find(".PRODUCTID").val(data[2]);
            adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
            adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
        }
    });

    adding.find(".UNITQUANTITY").change(function()
    {
        adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
    });


    return false;
});

Answer 1

i is reset to 0 every time $('#AddProduct').click() is called; I don’t think that’s what you want. You would need i to be declared outside of the function that’s passed into $('#AddProduct').click(). One way to do this would be through a closure.

(Note: I haven’t tested this.)

var onClick = (function() {
    var i = 0;
    return (function () {
        var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    

        $('#OrderProducts').append(adding);

        adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
            selectFirst: false
        }).result(function(event, data, formatted) {
            if (data) {
                adding.find(".UNITPRICE").val(data[1]);
                adding.find(".UNITPRICE").html(data[1]);
                adding.find(".PRODUCTID").val(data[2]);
                adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
                adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
            }
        });

        adding.find(".UNITQUANTITY").change(function()
        {
            adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
            adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        });

        return false;
    });
})();

$('#AddProduct').click(onClick);