count total number of input where input attribute is pre defined

Question

I am trying to make a function using jquery where i want to get the total number of input in a page with attibute value defined by me . For eg there are four input tags

<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="200" total_quantity="3" name="product1" value="book" class="product-200">

In the above tags i want to pre define barcode number in a variable and the count the number of inputs accordingly and also get the value of total_quantity in a variable for that barcode number i provide. I made the following code to get the total inputs but its for all input and is not according to barcode i will specify .

var barcode_pd = $('input[barcode]').size();
var total_pd = $('input.code').attr("total_quantity");
var sumOfVals = 0;
$(".mn-no-cnt").each(function(){sumOfVals = sumOfVals + parseInt($(this).val(), 10);});

Using above code the ouput for count of input is 4 and i want to specify the barcode number too such as 567 so that the count could be 3 or if i use barcode number 200 then the count is 1.

`total_quantity` and `barcode` are not valid HTML. You should use `data-` attributes — geedubb, Jan 04 '14 at 07:52
Thanks for the suggestion . Ill do it could you please suggest a good solution for this problem ? — user1001176, Jan 04 '14 at 07:54
you can use `data-` attribute instead. ex: `data-total_quantity` — Ravimallya, Jan 04 '14 at 07:56
you are never suppose to use same ID and name for multiple elements. — , Jan 04 '14 at 07:56
http://stackoverflow.com/questions/15314872/group-and-count-html-elements-by-data-attribute-in-jquery this may help you. — Ravimallya, Jan 04 '14 at 07:57

score 1 · Accepted Answer · answered Jan 04 '14 at 07:58

1

I have used array to store values.

var code = [];
var count = [];
$("input.code").each(function(){
    var c = $(this).attr("barcode");    
    if(code.indexOf(c) >= 0){
        count[code.indexOf(c)] += 1;
    }
    else{
        code.push(c);
        count.push(1);
    }
});
for(var i=0;i<code.length;i++){
    $("body").append("<p>Barcode:"+code[i]+" Count:"+count[i]+"</p>");
}

DEMO here.

answered Jan 04 '14 at 07:58

codingrose

15,563
11
39
58

Thanks for your answer but i wanted to specify barcode number myself . Is there a possible way to do that such as `var barcode_pre_defined= '567';` and then use this variable to filter the inputs ? – user1001176 Jan 04 '14 at 08:00

GrahamTheDev · Answer 2 · 2014-01-04T08:14:37.437

http://jsfiddle.net/A95Js/

function countBarcode(numberToFind){
    var countInputs = 0;

    $('input[barcode]').each(function(){
        if($(this).attr("barcode") == numberToFind){
            countInputs ++;
    }

        return countInputs;

});

}

$('#answer').html(countBarcode(567));

This is purely to count them - but combined with Hirals answer you should be able to work out how to turn his into a function. JSfiddle is above - obviously to make this useful you need to return the value not add it to a div - was just showing how to count it.

geedubb · Answer 3 · 2014-01-04T08:24:13.563

Try this. Set the barcode variable to the barcode you want to search for. I have also converted to data- attributes and have provided code to count and sum the data-total_quantity:

HTML:

<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10105">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10106">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10107">
<input type="hidden" class="code" data-barcode="200" data-total_quantity="3" name="product1" value="book" class="product-200">

Javascript:

$(function () {
    var barcode = 567; // set to whatever you want to search for...
    var sumOfVals = 0;
    $("input.code[data-barcode='" + barcode + "']").each(function () {
        sumOfVals += parseInt($(this).data('total_quantity'), 10);
    });
    alert("Length: " + $("input.code[data-barcode='" + barcode + "']").length);
    alert("Sum: " +  sumOfVals);
});

Fiddle:

http://jsfiddle.net/d89BR/4/

score 0 · Answer 4 · 2014-01-04T08:32:44.273

Try this :

var barcode = 123;
var $123 = $('input[data-barcode="' + barcode + '"]');
var howMany = $123.length;

var sumOfQuantities = Function('return ' + $123.map(function () {
    return $(this).data('quantity');
}).get().join('+') + ';')();

var sumOfValues = Function('return ' + $123.map(function () {
    return $(this).val() || '0';
}).get().join('+') + ';')();

HTML (example) :

<input data-barcode="123" data-quantity="123" value="123" />

score 0 · Answer 5 · answered Jan 04 '14 at 08:09

Without using jQuery:

function getCount(barcode){
  var code = document.getElementsByClassName('code') ;
  var length = code.length ;
  var count = 0 ;
    for(var i = 0 ; i < length ; i++){
      if(code[i].attributes['barcode'].value == barcode) count++ ;
  }
  return count ;
}

// Test

alert(getCount(567)) ; // 3
alert(getCount(200)) ; // 1

Demo : http://jsfiddle.net/wz98E/

count total number of input where input attribute is pre defined

5 Answers5