access html elements using class name in JavaScript

Question

Is there a way to accessing html elements under a particular class name in JavaScript?

Hers is what I have so far:

Partial:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student.Models.vwStudent>>" %>

<table>
        <tr>
            <th>
                Student ID
            </th>           
            <th>
                Past Due Amount
            </th>
            <th>
                Past Due Days
            </th>            
        </tr>

        <% if (Model != null)
           foreach (var item in Model) { %>

        <tr>
            <td class="StudentInv">
                <%=Html.TextBox("StudentID",item.StudentID) %>
            </td>

            <td class="StudentInv">
                <%=Html.TextBox("PastDueAmount",item.PastDueAmount) %>
            </td>
            <td class="StudentInv">
                <%=Html.TextBox("PastDueDays",item.PastDueDays) %>
            </td>            
        </tr>

    <% } %>

Master:

<div>
<% using(Html.BeginForm("SaveStudentInvoice", "StudentInvoice")) %>
<% { %>
<div>
<% Html.RenderPartial("DisplayStudentInvoiceList"); %>
</div>
<% } %>
<br/>
<input type="button" id="Submit" name="Submit" value="Submit" />
</div>

JavaScript:

$('#Submit').click(function () {

    var link = '/StudentInvoice/SaveStudentInvoice';
    $.ajax({
        type: 'POST',
        url: link,
        data: { SaveStudent: $(".StudentInv").val()
        },
        dataType: 'json',
        success: function (result) {
            alert("Success")
        },
        error: function (result) {
            alert("Failed")
        }
    });
});

Controller:

[HttpPost()]
public ActionResult SaveStudentInvoice(string SaveStudent)
{
    /// Parse SaveStudent String and rerform some Action

        return View();

}

It was nice of you to supply some code, but none of the code you've shown here seems relevant to your question. — Robert Harvey, Jul 17 '12 at 22:07
@RobertHarvey The relevant part is `data: { SaveStudent: $(".StudentInv").val()` — Ruan Mendes, Jul 17 '12 at 22:08

Ruan Mendes · Accepted Answer · 2012-07-17T23:32:54.177

2

Your jQuery should be

$(".StudentInv input")

Selecting the input object inside a node with the class of StudentInv.

UPDATE Working With Lists

Note that because your query returns multiple nodes, $.val() only returns the first item's value. You can iterate through each of them by doing http://jsfiddle.net/Qs4JC/2/

var values = [];
$(".StudentInv input").each(function(){
   values.push($(this).val());
});
// values is populated here

edited Jul 17 '12 at 23:32

answered Jul 17 '12 at 22:07

Ruan Mendes

90,375
31
153
217

specifically, that is selecting the input that is a descendant of a node with class StudentInv . The > operator would select only a direct child (not grandchildren). – Stefan H Jul 17 '12 at 22:10
@StefanH I never said direct child, I said inside another node – Ruan Mendes Jul 17 '12 at 22:10
I dont have 'input' elements though. all are textboxes (using html helper) – user793468 Jul 17 '12 at 22:11
1

@user793468 Textboxes are inputs. You should know what's going under the cover, run your app, open it on the browser, right click and select "View source". You'll get shocked! – Andre Calil Jul 17 '12 at 22:13
Juan, I was not saying that the selector you supplied was wrong, I was just providing elaboration on what your selector will do, in case the OP's markup changes, and they only actually want to select the child, not all descendants. – Stefan H Jul 17 '12 at 22:13
@AndreCalil Is there a way to access value of an input element in a class? for e.g. I have a StudentID textbox which has a StudentID value which I need:<%=Html.TextBox("StudentID",item.StudentID) %> I tried it the following way but get "undefined" as its value: $(".StudentInv input").val() – user793468 Jul 17 '12 at 22:37
@AndreCalil I have three studentIds displaying but only the first one is being sent to controller action. Is there a way to accessing all three student Ids? – user793468 Jul 17 '12 at 22:53
@JuanMendes I have three studentIds displaying but only the first one is being sent to controller action. Is there a way to accessing all three student Ids? – user793468 Jul 17 '12 at 22:59

HatSoft · Answer 2 · 2012-07-17T22:53:14.267

0

Please use Jquery for it like this $('.StudentInv :input');

Bonus : http://jsfiddle.net/Qs4JC/1/

edited Jul 17 '12 at 22:53

answered Jul 17 '12 at 22:09

HatSoft

11,077
3
28
43

1

@JuanMendes not intentionally becuase sometime the page takes time to refresh, anyway we both know jquery – HatSoft Jul 17 '12 at 22:12
@JuanMendes i have changed my answer :) – HatSoft Jul 17 '12 at 22:16
That selector will get inputs with the class of StudentInv, which is not what the OP is looking for – Stefan H Jul 17 '12 at 22:16
@StefanH in that case I am not clear what OP wants, my answer is for "Is there a way to accessing html elements under a particular class name in JavaScript?" – HatSoft Jul 17 '12 at 22:18
1

The OP wants the input elements that are children of an element with the class of StudentInv, not an input with the class of StudentInv. – Stefan H Jul 17 '12 at 22:20
@StefanH oh dear another tricky question :> ill correct my answer – HatSoft Jul 17 '12 at 22:21
2

@HatSoft Your answer will work with the minimal html that the OP provided, but if there is ever anything other than the input as a child of .StudentInv then this will break, you should at least filter for an input elements. Your answer is providing no value over Juan Mendes' – Stefan H Jul 17 '12 at 22:34
@HatSoft I didn't down vote it, but my guess is that it's the same reason why I added my comment about it being a duplicate answer. I didn't imply that you knowingly copied it, I was just saying that after you posted it, you should have noticed an answer that was exactly like yours, but beaty you by 10 minutes. I would have deleted my answer in that case and upvoted the existing answer. However, I do think the downvote is unwarranted now that you changed your selector to include ':input' which I'm guessing works for `select`, `textarea` and `input` – Ruan Mendes Jul 19 '12 at 16:18
@StefanH I agree that adding the direct child operator is wrong in 90% of the cases, it usually means you didn't properly give your nodes classnames and instead of giving them classnames, you just use position in the DOM. I actually answered a question about brittle CSS expressions and that was one of my points. http://stackoverflow.com/questions/10743682/how-to-avoid-locking-my-html-structure-when-using-jquery-to-create-rich-client-e/10743766#10743766 – Ruan Mendes Jul 19 '12 at 23:21

access html elements using class name in JavaScript

2 Answers2