jquery - count similar data fields/class name in html form [duplicate]

Question

I want to get the count of data-fields in HTML form using JavaScript or jQuery

<input data-table="assessment_rating" data-field="x_PERFORMANCE_MEASURE" 
name="x1_PERFORMANCE_MEASURE" id="x1_PERFORMANCE_MEASURE" 
placeholder="Performance Measure" 
value="" class="form-control" type="text">

I have 10 input fields with same name data-field = "x_PERFORMANCE_MEASURE".

I want to get the count dynamically using jQuery or JavaScript.

I used below code

var x = $('#ewTableHeaderCell .x_PERFORMANCE_MEASURE').length;
alert (x);

I am not getting with the above script... please help me out.

got the solution...Thnx

Anil Kumar Reddy
– Anil Kumar Reddy

2017-10-06 12:08:37 +00:00
Commented Oct 6, 2017 at 12:08 — Anil Kumar Reddy
– Anil Kumar Reddy, Commented Oct 6, 2017 at 12:08

Mouser · Accepted Answer · 2017-10-06 12:07:35Z

4

You need to use another selector: look at the example.

//look
var x = $('input[data-field="x_PERFORMANCE_MEASURE"]').length;
alert (x);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input data-table="assessment_rating" data-field="x_PERFORMANCE_MEASURE" 
name="x1_PERFORMANCE_MEASURE" id="x1_PERFORMANCE_MEASURE" 
placeholder="Performance Measure" 
value="" class="form-control" type="text">

Of course since your example didn't include the original #ewTableHeaderCell table header cell, I've omitted it out of my snippet. But you get the idea. in your case it is:

var x = $('#ewTableHeaderCell input[data-field="x_PERFORMANCE_MEASURE"]').length;

Since jquery uses css selectors under the hood, click the link to learn more.

edited Oct 6, 2017 at 12:07

answered Oct 6, 2017 at 12:05

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

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

6 Comments

Justinas Over a year ago

Your selector will select every input that has data-field no matter where it's placed (I mean in parent container).

Mouser Over a year ago

@Justinas, I generalized it, because of lacking HTML in the OP's question and commented it in my answer.

Anil Kumar Reddy Over a year ago

if i have select in place of input?how do i replace the code?

Mouser Over a year ago

replace input with select. Read the documentation through the provided link. It is really useful. You should get to know CSS selectors.

Anil Kumar Reddy Over a year ago

is this correct $('select[data-field="x_PERFORMANCE_MEASURE"]').length;?

|

Justinas · Accepted Answer · 2017-10-06 12:03:33Z

4

Since x_PERFORMANCE_MEASURE is not a class, you can't use class selector .

Select it using attribute selector:

$(document).ready(function() {
  alert($('#ewTableHeaderCell [data-field="x_PERFORMANCE_MEASURE"]').length);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="ewTableHeaderCell">
<input data-table="assessment_rating" data-field="x_PERFORMANCE_MEASURE" 
name="x1_PERFORMANCE_MEASURE" id="x1_PERFORMANCE_MEASURE" 
placeholder="Performance Measure" 
value="" class="form-control" type="text">
</span>

answered Oct 6, 2017 at 12:03

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Collectives™ on Stack Overflow

jquery - count similar data fields/class name in html form [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related