How to get data from multiple inputs and output them as string in jQuery

Question

OK so I have a bunch of inputs like so:

<input type="number" name="quantity" value="0" data-id="100">
<input type="number" name="quantity" value="1" data-id="101">
<input type="number" name="quantity" value="2" data-id="102">
<input type="number" name="quantity" value="3" data-id="103">
<input type="number" name="quantity" value="0" data-id="104">

<button data-ids=""></button>

I want to loop through these and get the data-id and value from inputs that have a value more than 0 and output it to the buttons data-ids attribute like so:

<button data-ids="101:1,102:2,103:3"></button>

Here is the code i have so far:

$('input').each( function(){  
    var input = $(this);

    // Check quantity is more than 0
    if ($(input).val() > '0'){

        var output = input.attr('data-id') + ':' + input.val();

        console.log(output);
        $('button').attr('data-ids', output);

    }
});

This seems to output the data in the console but only outputs the last input in the button.

Answer 1

You need to concatenate to your data-ids every time which you don't do. Each item replaces the previous one.

var dataIds = $('button').attr('data-ids') + output;
$('button').attr('data-ids', dataIds );

But with this approach you don't get the , in the output.

Try this approach. Push into the array and then join the items by , .

Code

 var output = []; $('input').each( function(){ var input = $(this); if ($(input).val() > '0'){ output.push(input.attr('data-id') + ':' + input.val()); } }); $('button').attr('data-ids', output.join(',')); console.log($('button').attr('data-ids')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="quantity" value="0" data-id="100"> <input type="number" name="quantity" value="1" data-id="101"> <input type="number" name="quantity" value="2" data-id="102"> <input type="number" name="quantity" value="3" data-id="103"> <input type="number" name="quantity" value="0" data-id="104"> <button data-ids=""></button> 

Answer 2

You need to build the output iteratively, via concatenation, and apply it outside the loop.

var output = [];
$('input').each( function(){  
    var input = $(this);
    if ($(input).val() > '0')
        output.push(input.attr('data-id') + ':' + input.val());
});
$('button').attr('data-ids', output.join());

Answer 3

Here you go with a solution

 var output = ""; $('input').each( function(){ var input = $(this); // Check quantity is more than 0 if ($(input).val() > '0'){ output += input.attr('data-id') + ':' + input.val() + ","; } }); console.log(output); $('button').attr('data-ids', output.substr(0, output.length - 1)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="quantity" value="0" data-id="100"> <input type="number" name="quantity" value="1" data-id="101"> <input type="number" name="quantity" value="2" data-id="102"> <input type="number" name="quantity" value="3" data-id="103"> <input type="number" name="quantity" value="0" data-id="104"> <button data-ids=""></button> 

You need to concatenate comma at the end of each loop item & need to remove the last comma as well.

Hope this will help you.