Adding the values in multiple textboxes to a single textbox in php

Question

I've a form which contains a div inside which contains a two textboxes one for service type and another for amount and an add more button. When i click on add more button. The div will get duplicated per onclick. Now I want the values in each amount textbox to be summed up and should be shown in another textbox total. I've created a JS function to show the value entered in amount textbox on onkeyup. But I didn't got any answer.

Here is the code what I've tried so far..

HTML

<table>
    <tr id="service">
        <td>
            <span>Service Type:</span>
        </td>
        <td>
            <input type="text" name="servicetype" id="servicetype" />
        </td>
        <td>
            <span>Amount:</span>
        </td>
        <td>
            <input type="text" name="amount" id="amount" onkeyup="onkeyupsum()"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" id="addmore" onclick="duplicate()" value="Add More"/>
        </td>
    </tr>
    <tr>
        <td><h4 style="text-align:left; padding:0,300px,300px,0;">Total Amount</h4></td>
        <td><input type="text" name="tamt" id="tamt"></td>
    </tr>
</table>

Javascript:

<script>
    var i = 0;
    function duplicate() 
    {                    // function to clone a div    
        var original = document.getElementById('service');
        var rows = original.parentNode.rows;
        var i = rows.length - 1;
        var clone = original.cloneNode(true); // "deep" clone
        clone.id = "duplic" + (i); // there can only be one element with an ID
        original.parentNode.insertBefore(clone, rows[i]);
    }
    function onkeyupsum()
    { // calculate sum and show in textbox
        var sum = 0;
        var amount1= document.getElementById('amount').value;
        sum += parseFloat(amount1);
        document.submitform.tamt.setAttribute("value",sum );
    }
</script>

Can anyone tell me the way to take the textbox values even from duplicated div to textbox.

use Jquery for more flexibility for this kind of stuff. Answer with Jquery is allow ? — prog1011
– prog1011, Commented Nov 3, 2014 at 10:33

dfsq · Accepted Answer · 2014-11-03 10:38:18Z

1

What you should do is to give inputs common class name and then in onkeyupsum select all inputs and calculate sum in loop:

function onkeyupsum() { // calculate sum and show in textbox
    var sum = 0,
        amount = document.querySelectorAll('.amount'), i;
    for (i = 0; i < amount.length; i++) {
        sum += parseFloat(amount[i].value || 0);
    }
    document.submitform.tamt.value = sum;
}

and input will look like:

<input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" />

Demo: http://jsfiddle.net/mf7wqkq2/

answered Nov 3, 2014 at 10:38

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Adding the values in multiple textboxes to a single textbox in php

1 Answer 1

Demo: http://jsfiddle.net/mf7wqkq2/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://jsfiddle.net/mf7wqkq2/

Comments

Your Answer

Sign up or log in

Post as a guest

Related