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
– geedubb, Commented Jan 4, 2014 at 7:52
Thanks for the suggestion . Ill do it could you please suggest a good solution for this problem ? — user1001176
– user1001176, Commented Jan 4, 2014 at 7:54
you can use data- attribute instead. ex: data-total_quantity — Ravimallya
– Ravimallya, Commented Jan 4, 2014 at 7:56
you are never suppose to use same ID and name for multiple elements. — user1625871
– user1625871, Commented Jan 4, 2014 at 7:56

codingrose · Accepted Answer · 2014-01-04 07:58:26Z

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 4, 2014 at 7:58

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

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

1 Comment

user1001176 Over a year ago

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 ?

Juan Garcia · Accepted Answer · 2014-01-04 08:09:39Z

0

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/

answered Jan 4, 2014 at 8:09

Juan Garcia

7067 silver badges23 bronze badges

Comments

GrahamTheDev · Accepted Answer · 2014-01-04 08:14:37Z

0

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.

edited Jan 4, 2014 at 8:14

answered Jan 4, 2014 at 8:03

GrahamTheDev

25.3k2 gold badges43 silver badges82 bronze badges

Comments

geedubb · Accepted Answer · 2014-01-04 08:24:13Z

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 · Accepted Answer · 2014-01-04 08:32:44Z

0

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" />

edited Jan 4, 2014 at 8:32

answered Jan 4, 2014 at 8:06

user1636522

Collectives™ on Stack Overflow

count total number of input where input attribute is pre defined

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related