0

I am facing a problem such like, I can't extract the dependent ids who are belongs to same name.

Here is my HTML

<table id="table-data" class="table table-bordered table-data" style="vertical-align: middle;">
    <tbody>
        <tr>
            <th style="width: 15%">Project</th>
            <th style="width: 15%">Module</th>
            <th style="width: 15%">Relevant Client</th>
            <th style="width: 20%">Task</th>
            <th style="width: 5%">Hours</th>
            <th style="width: 20%">Comments</th>
            <th></th>
        </tr>

        <tr id="1045">
            <input id="ChildId" name="ChildId" type="hidden" value="1045">
            <td>
                <select class="form-control input-sm valid" id="ProjectId0" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)" onload="selecetTheTask(this)">
                    <option value="">--Select--</option>
                    <option selected="selected" value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId0" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId0" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId0" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="4">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="a">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>
        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId1" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId1" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId1" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId1" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId2" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId2">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId2" name="ModuleId">
                    <option value="" id="ModuleId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId2" name="ClientId">
                    <option value="" id="ClientId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId2" name="TaskId">
                    <option value="" id="TaskId2">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId3" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId3">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId3" name="ModuleId">
                    <option value="" id="ModuleId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId3" name="ClientId">
                    <option value="" id="ClientId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId3" name="TaskId">
                    <option value="" id="TaskId3">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
    </tbody>
</table>

Look here on my HTML code I have same name like ProjectId, ModuleId, TaskId and so many. Actually the number of table rows are propagating dynamically. So the ids are different from the name. I have done this because in MVC4 I can easily get those data by name in POST action. But I badly need to do some work on view page. So I want to count how many ids are using the same class name. I want to apply some business on those classes.

I have gone through this Question, it's quiet similar to me with a particular different. There he/she shows the ids and my difference is I want to count them. I have found also another solution answer, however it's done in CSS Badly I need it in Javascript or jQuery

Moreover the number of the ids can be as much as possible and may not be in sequence like ProjectId1, ProjectId2, then projectId99 but each of them will be under ProjectId class. therefore I want to get the total number ids by it's name. Thank you.

Community
  • 1
  • 1
Ananda G
  • 2,389
  • 23
  • 39
  • Just so you are aware... duplicate IDs are invalid in HTML and will cause issues. – evolutionxbox Mar 13 '17 at 12:34
  • Your HTML is invalid. `id` values **must** be unique in the document, you can't use the same `id` on more than one element. So that's the first thing to change. You might consider using `class` instead. – T.J. Crowder Mar 13 '17 at 12:34
  • I'm not duplicating the ids. I am providing the same `name` only. All `ids` are totally different. Sorry to say that it's working fine, and there is no problem. And I am getting the data easily in Controller, through the name. – Ananda G Mar 13 '17 at 12:40
  • Your html makes no sense, particularly is your dynamically adding new items and will never correctly 2-way bind to any model. Suggest your look at [this article](http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/) to understand how to bind correctly to collections, and the answers [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) and [here](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for examples –  Mar 13 '17 at 22:05
  • @ [Stephen Muecke](http://stackoverflow.com/users/3559349/stephen-muecke) I can't do that. on my model the input fields are coming from a child model [look](http://imgur.com/a/PNHIf), here child models are unlimited. It will be generate from the `+` button, SO there is no limit. look the [razor](http://imgur.com/a/NGDhj), if you can give me a better suggestion on `razor`, i mean to modify it, then it will be perfect. – Ananda G Mar 14 '17 at 04:37
  • @AnandaM.Ghosh, Did you even bother to read the links I gave you? That's exactly what the code does! It generates a new objects for your collection property in the view and gives it the correct name attributes for binding to your model, along with validation etc (which your code will never do!). And if you want to add 1 million items to the collection, just click the '+' button 1 million times –  Mar 14 '17 at 10:48

3 Answers3

1

If you have got a few elements belonging to the same name, then you can simply use the length or size() of jQuery to find the number of selected elements. See the Documentation for details.

So , the following should return the number of elements with a name attribute 'projectId'

$('[name=projectId]').length;

The number of elements currently matched. The .size() method will return the same value.

Furthermore, if you need count of all elements with name=projectId and an Id starting with ProjectId(ProjectId1, ProjectId2 ... and so on) then you can use the "Attribute starts with selector" as well like below :

$('[id^=Projectid][name=projectId]').length;

Or, all elements which have at least an id :

$('[id][name=projectId]').length;

$('#Res').text("Number of Elemnts in with name 'projectId' : " +$('[name=projectId]').length);

$('#Res1').text("Number of Elemnts in with name 'projectId' and Id starting with 'test': " +$('[id^=test][name=projectId]').length);

$('#Res2').text("Number of Elemnts in with name 'projectId' and containing an Id : " +$('[id][name=projectId]').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" name="projectId"></div>
<div id="test1" name="projectId"></div>
<div id="test2" name="projectId"></div>
<div id="test3" name="projectId"></div>
<div id="anyId" name="projectId"></div>
<div name="projectId"></div>
<div id="Res"></div>
<div id="Res1"></div>
<div id="Res2"></div>
Exception_al
  • 1,049
  • 1
  • 11
  • 21
0

Non-jquery method:

I'd recommend using document.querySelectorAll.

The following is an example where I get elements by their names: ModuleId, ProjectId and ClientId.

var names = ["ProjectId", "ModuleId", "ClientId"]

for (let i = 0; i < names.length; i++)
{
  let temp = names[i];
  let things = document.querySelectorAll(`[name="${temp}"]`);
  console.log(temp, "count:", things.length);
}
<table id="table-data" class="table table-bordered table-data" style="vertical-align: middle;">
    <tbody>
        <tr>
            <th style="width: 15%">Project</th>
            <th style="width: 15%">Module</th>
            <th style="width: 15%">Relevant Client</th>
            <th style="width: 20%">Task</th>
            <th style="width: 5%">Hours</th>
            <th style="width: 20%">Comments</th>
            <th></th>
        </tr>

        <tr id="1045">
            <input id="ChildId" name="ChildId" type="hidden" value="1045">
            <td>
                <select class="form-control input-sm valid" id="ProjectId0" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)" onload="selecetTheTask(this)">
                    <option value="">--Select--</option>
                    <option selected="selected" value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId0" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId0" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId0" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="4">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="a">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>
        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId1" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId1" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId1" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId1" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId2" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId2">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId2" name="ModuleId">
                    <option value="" id="ModuleId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId2" name="ClientId">
                    <option value="" id="ClientId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId2" name="TaskId">
                    <option value="" id="TaskId2">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId3" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId3">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId3" name="ModuleId">
                    <option value="" id="ModuleId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId3" name="ClientId">
                    <option value="" id="ClientId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId3" name="TaskId">
                    <option value="" id="TaskId3">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
    </tbody>
</table>
A. L
  • 11,695
  • 23
  • 85
  • 163
0

You can find all ids in all rows or specific row like this $('tr + tr [name=ProjectId]').length

$('#ProjectIdResult').text("ProjectID in all rows: "+$('tr + tr [name=ProjectId]').length);
$('#ModuleIdResult').text("ModuleID in all rows: "+$('tr + tr [name=ModuleId]').length);
$('#TaskIdResult').text("TaskID in all rows: "+$('tr + tr [name=TaskId]').length);
$('#ClientIdResult').text("ClientID in all rows: "+$('tr + tr [name=ClientId]').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-data" class="table table-bordered table-data" style="vertical-align: middle;">
    <tbody>
        <tr>
            <th style="width: 15%">Project</th>
            <th style="width: 15%">Module</th>
            <th style="width: 15%">Relevant Client</th>
            <th style="width: 20%">Task</th>
            <th style="width: 5%">Hours</th>
            <th style="width: 20%">Comments</th>
            <th></th>
        </tr>

        <tr id="1045">
            <input id="ChildId" name="ChildId" type="hidden" value="1045">
            <td>
                <select class="form-control input-sm valid" id="ProjectId0" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)" onload="selecetTheTask(this)">
                    <option value="">--Select--</option>
                    <option selected="selected" value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId0" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId0" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId0" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="4">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="a">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>
        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId1" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId1" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId1" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId1" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId2" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId2">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId2" name="ModuleId">
                    <option value="" id="ModuleId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId2" name="ClientId">
                    <option value="" id="ClientId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId2" name="TaskId">
                    <option value="" id="TaskId2">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId3" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId3">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId3" name="ModuleId">
                    <option value="" id="ModuleId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId3" name="ClientId">
                    <option value="" id="ClientId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId3" name="TaskId">
                    <option value="" id="TaskId3">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
    </tbody>
</table>

<div id="ProjectIdResult">
</div>
<div id="ModuleIdResult">
</div>
<div id="TaskIdResult">
</div>
<div id="ClientIdResult">
</div>
Ammar Ahmed
  • 126
  • 8