how to pass dynamic created textbox value to array in jquery

Question

i am making a program in which i want to get addition of dynamic textbox as final result. i want to add all 3rd box value in final result box,and if click on remove the value of corresponding should be deduct from final result...

here is code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />
<br> final result of all 3rd boxes:
<input type="text" value="" id="final_result" />
<script>
var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event) {

    // create a limit
    if ($(".box").length >= maximumBoxes) {
        alert("You cannot have more than 10 boxes!");
        return;
    }

    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for (var i = 0; i < amountOfInputs; i++) {
        listItem.append('<input type="text" class="input" />');
    }
    listItem.append('<input type="text" class="output" name="value" placeholder="3rd box"/>');
    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event) {
    // Get the group
    var group = $(this).parent();
    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");
    // Get the input where you want to print the output
    var output = group.children(".output");
    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function() {
        // Add the value of every box. If parseInt fails, add 0.
        value += parseInt(this.value) || 0;
        var a = parseInt(value);
    });
    // Print the output value
    output.val(value);
    document.getElementById('final_result').value = value;



    var test = document.getElementById('final_result').value
    var b = parseInt(test) + parseInt(a);
    alert(a);

});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event) {
    event.preventDefault();
    $(this).parent(".box").remove();
});
</script>

final result box is not showing sum of all 3rd boxes

Nitish
– Nitish

2015-06-12 06:58:01 +00:00
Commented Jun 12, 2015 at 6:58 — Nitish
– Nitish, Commented Jun 12, 2015 at 6:58
<input type="text" value="" id="final_result" />

Nitish
– Nitish

2015-06-12 06:58:24 +00:00
Commented Jun 12, 2015 at 6:58 — Nitish
– Nitish, Commented Jun 12, 2015 at 6:58

Vaibs_Cool · Accepted Answer · 2015-06-12 07:20:57Z

2

$('.clickMe').on('click', function() {

    var total=0;
    var myInput1Vals = $("#boxes").find('.output').map(function() {
        total += parseInt(this.value)
        console.log("total : "+total);

        return this.value;

    });

    $("#final_result").val(total);
});

NEW function to add numbers

 function addNum(){
    var total=0;
        var myInput1Vals = $("#boxes").find('.output').map(function() {
            total += parseInt(this.value)
            console.log("total : "+total);

            return this.value;

        });
        $("#final_result").val(total);
    }

KEYUP FUNCTION on 3rd BOX

$('#boxes').on('keyup','.output', function() {
       addNum();
 });

FIDDLE DEMO

edited Jun 12, 2015 at 7:20

answered Jun 12, 2015 at 7:05

Vaibs_Cool

6,1506 gold badges30 silver badges61 bronze badges

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

7 Comments

Nitish Over a year ago

we should pass keyup function instead click

Vaibs_Cool Over a year ago

updated my answer.. made a function and you can call it on add and remove button

Nitish Over a year ago

yeah remove button is working correctly, but can we we have final result without click button ??

Nitish Over a year ago

$('.input.input').on('keyup', function() { //var block = $("#boxes").closest('.htmlBlock'); // var inputs = $("#boxes").find('.output'); // .myInput1 values as an array. var total=0; var myInput1Vals = $("#boxes").find('.output').map(function() { total += parseInt(this.value) console.log("total : "+total); $("#final_result").val(total); return this.value; });

Vaibs_Cool Over a year ago

have updated my answer as per your keyup requirement

|

Mackan · Accepted Answer · 2015-06-12 07:34:42Z

1

Your variable value will only contain the sum for one row. This is what you later append to the final result:

document.getElementById('final_result').value = value;

Instead, you might want to do this to loop through the sum of all rows (i.e. all elements with class output):

//...

output.val(value);

var totValue = 0;
$('.output').each(function() {
    totValue += parseInt(this.value, 10) || 0;
});
//document.getElementById('final_result').value = value;
$('#final_result').val(totValue);    

//...

Also, for your remove function:

$(document).on("click", ".removeGroup", function(event) {
    event.preventDefault();
    var removedValue = parseInt($(this).parent().find('.output').val(), 10) || 0;
    var prevValue = parseInt($('#final_result').val(), 10) || 0;
    $('#final_result').val(prevValue - removedValue);
    $(this).parent(".box").remove();
});

Proof of concept: http://jsfiddle.net/thzmLoya/3/

edited Jun 12, 2015 at 7:34

answered Jun 12, 2015 at 7:18

Mackan

6,2712 gold badges29 silver badges46 bronze badges

3 Comments

Mackan Over a year ago

@Nitish Good, glad it works. If it suited your needs and answered the question, please mark as answer (or Vaibs_Cool answer if you used his solution instead).

Nitish Over a year ago

mark ??? where i have to mark ? sorry i am new here,i dont know how to operate stackoverflow.com properly

Nitish Over a year ago

yeah i marked... but what it mean ?? why should i check mark it ?

Collectives™ on Stack Overflow

how to pass dynamic created textbox value to array in jquery

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related