Dynamic Textfields using jquery and calculating field value

Question

I am working on jquery code to add dynamic fields to the list of my fields, i have couple of web links but most of them using using live command does not work as expected, all i am doing this inside the jquery UI Tabs

I gave a try with this code, as it works well but has couple of issues:

function trimNums(stringToTrim)
        {
            return stringToTrim.replace(/\d+$/,"");
        }         
        function dupForm(divId, divClass, btnAdd, btnRm)
        {
        //alert(divId+'   '+divClass);
            var num     = $(divClass).length;
            var newNum  = new Number(num + 1);
            var i;

            var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);

            for (i=0; i < newElem.children().length; i++)
            {
                var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
                var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));

                newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum);
            }
            $('#' + divId + num).after(newElem);
            $('#' + btnRm).attr('disabled',false);

            //if (newNum == 15)
                //$('#' + btnAdd).attr('disabled','disabled');
        }

        function rmForm(divId, divClass, btnAdd, btnRm)
        {
            var num = $(divClass).length;

            $('#' + divId + num).remove();
            //$('#' + btnAdd).attr('disabled','');

            if (num-1 == 1) {
                $('#' + btnRm).attr('disabled','disabled');
                $('#' + btnAdd).attr('disabled',false); 
            }
        }
<div>
        <input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" />
        <input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br />
    </div>
            <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                <input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" />
                <input type="text" class="input-block-level-inputfields" name="price1" id="price1" style="width:50px;" placeholder="Price" />
            </div>

Issues with the Code:

It is also clones the value if i enter the value in one field and click on add which i do not want.
in the Price field, i want to enter the price value and it should get calculated immediately in the div box, i will define later. if i click remove the amount should be deducted immediately

Thanks

Samuel Liew · Accepted Answer · 2013-08-05 04:10:31Z

2

1) After cloning, set value to empty:

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).val('');

or

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);
newElem.val('').attr('value', '');

However, cloning should NOT copy the value, as stated in the jQuery API:

the dynamic state of form elements (e.g., user data typed into input, and textarea or user selections made to a select) is not copied to the cloned elements.

As for (2), you did not provide sufficient info. Please post your code which sums up the price fields, and the "div" box HTML.

If you do not have it yet, firstly, add a div box with an ID like this:

<div id="answer">0</div>

Next, add this JavaScript code:

function recalculateTotal() {
    var total = 0;
    $('input[placeholder=price]').each(function() {
        total += parseFloat($(this).val());
    };
    $('#answer').text(total);
}
$(function() {
    $('body').on('keyup', 'input[placeholder=price]', recalculateTotal);
});

And add this to the last line of your function rmForm:

recalculateTotal();

edited Aug 5, 2013 at 4:10

answered Aug 5, 2013 at 3:57

Samuel Liew

79.5k112 gold badges173 silver badges318 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Regual Over a year ago

+1 for giving an option to add the .val(), but that did not worked, The field calculation is based on the following:

$('#answer').text(newElem); <tr>           <td><label for="total"><strong>Total</strong></label><span id="answer"></span></td>         </tr>

Regual Over a year ago

the line $('#answer').text(newElem); is already added above in the main code

Regual Over a year ago

It does not seems to be working, i am using this inside the jquery UI tabs, but i pulled out the page and tried on single, still it is not going inside the lop and nothing is being calculated

Regual Over a year ago

I am not getting any error, but i worked on the dupForm function and added the line you provided above for cloning, but it is still copying the values to next set of textboxes when i click the add button

Regual Over a year ago

for the value being cloned, figured out another way. Here it works like this newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum).attr('value','');

|

Collectives™ on Stack Overflow

Dynamic Textfields using jquery and calculating field value

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related