Javascript/Jquery calculate dynamic textbox form

Question

I got a jquery code to create dynamic textbox. Here's my jquery code:

    var rowNum = 0;
    function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">Tanggal: <input type="text" class="datepick" name="qty[]" id="date'+rowNum+'" value="'+frm.add_qty.value+'" readonly="readonly"> Harga: <input type="text" name="name[]" value="'+frm.add_name.value+'" readonly="readonly"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
    }

    function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    }

and here's my form code:

   <div class="form-group">
   <label>Price Given</label>
      <div id="itemRows">                                
      <label class="strong">Date: <input type="text" name="add_qty" class="datepick" id="date[]" /> 
      Price: <input type="text" name="add_name" /> 
        <input onclick="addRow(this.form);" type="button" value="Add" />
     </div>
    </div>
<div class="form-group">
    <label>Total</label>
      <input type="text" class="form-control" name="total" id="total" />
    <button type="button" name="calculate">Calculate</button>
</div>

My problem is, how to create my textbox 'total' can automatically or can calculate (by pressing button calculate) the total of textbox 'add_name' (price)? I hope there's an easiest/simplest way to do this calculate.

Name of the input filed which hods the value is "add_name", right? — Rino Raj
– Rino Raj, Commented Jul 9, 2015 at 3:21
Please Verify my answer. Check if the answer solves your problem — Rino Raj
– Rino Raj, Commented Jul 9, 2015 at 3:31
I have updated the "DEMO". Please verify. As you enter the value the total will change :) — Rino Raj
– Rino Raj, Commented Jul 9, 2015 at 3:54

Rino Raj · Accepted Answer · 2015-07-09 03:54:09Z

1

Please try this code

 $(document).ready(function(){
        $("input[type='text'][name='add_name']").change(function(){
            var sum = 0
            $("input[type='text'][name='add_name']").each(function(){
                sum = sum + parseInt($(this).val());
            });
            $("input[type='text'][name='total']").val(sum);
        });
    });

DEMO

edited Jul 9, 2015 at 3:54

answered Jul 9, 2015 at 3:24

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

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

2 Comments

Cross Vander Over a year ago

Hello, thanks for answer, i already tried that being this: jsfiddle.net/9dx1cxu8/5 but it's not automatically change the total value. or this method is used for the button? Sorry, I have minim knowledge at jquery

Rino Raj Over a year ago

Its always pleasure to help others :)

Roson · Accepted Answer · 2015-07-09 03:47:31Z

0

try this one.

$('[name="calculate"]').on('click', function() {
    var sum = 0;
    $('[name="add_name"]').each(function() {
        sum += $(this).val();
    })
    $('#total').val(sum);
})

answered Jul 9, 2015 at 3:47

Roson

14 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery calculate dynamic textbox form

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related