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.

Suren Srapyan · Accepted Answer · 2017-09-21 17:09:59Z

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>

Shiladitya · Accepted Answer · 2017-09-21 16:52:17Z

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.

Mitya · Accepted Answer · 2017-09-21 18:10:28Z

0

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());

edited Sep 21, 2017 at 18:10

answered Sep 21, 2017 at 16:49

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

3 Comments

user3590977 Over a year ago

This works well as well, what is the difference between this approach and Suren Srapyan's?

Suren Srapyan Over a year ago

One thing with this. Your items are not comma separated

Mitya Over a year ago

Edited. Output now stored as an array and then joined via join() (a comma is used if no separator string is specified.)

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related