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();

}

Answer 1

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