CODEWITHSUNDEEP
jquery
user335160
user335160

Reputation: 1362

how to validate the textbox value from a table (grid) using jquery

I need to validate the text box value from the generated html table (grid) when the save button was clicked. The below is what I have so far. I traced the code using Firebug, it loops only the first row, but I need to loop the rows that starts from the second row within tag. Any help please.

Html Code

<div class="msg-body">
     <table class="dynamictable">
                <thead>
                    <tr>
                        <th style="display: none"></th>
                        <th>Package Name</th>
                        <th>Package Cost</th>
                        <th>No. of Attendees</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                 <tr class="prototype">
                        <td style="display: none"><input type="hidden" name="id[]" value="" class="id" /></td>
                        <td><input type="text" name="packagename[]" value="" class="pkname" /></td>
                        <td><input type="text" name="packagecost[]" value="" class="pkcost"/></td>
                        <td><input type="text" name="noofattendees[]" value="" class="nfattendees"/></td>
                        <td>@Html.ActionImage("", null, "~/Content/Images/delete.gif", "Delete", new { @class = "deleterows" }) </td>
                 </tr>
                 <tr>
                    <td style="display: none"><input type="hidden" name="id[]" value="" class="id" /></td>
                    <td><input type="text" name="packagename[]" value="" class="pkname" /></td>
                    <td><input type="text" name="packagecost[]" value="" class="pkcost"/></td>
                    <td><input type="text" name="noofattendees[]" value="" class="nfattendees"/></td>
                    <td>@Html.ActionImage("", null, "~/Content/Images/delete.gif", "Delete", new { @class = "deleterows" }) </td>
              </tr>
           </tbody>
    </table>
     <div style="padding:20px 0 20px 100px "><input type="button" id="btnAddButton" value="Add New" class="button addbutton"/><input type="button" id="btnSaveRow" value="Save" class="button addbutton"/></div>
</div>

Javascript Code

 $("#btnSaveRow").click(function () {
        $('.dynamictable tr').each(function () {
            var $val = $("input[type='input']").val();
            if ($val == "") {
                alert("Please enter data");
                $(this).focus();
                return false;
            }
              return true;
        });

Upvotes: 0

Views: 2874

Answers (1)

thecodeparadox
thecodeparadox

Reputation: 87073

$("#btnSaveRow").click(function() {
    $("input[type='text']", ".dynamictable tbody tr:gt(0)").each(function() {
        if (!$.trim(this.value)) {
            alert("Please enter data");
            $(this).focus();
            return false;
        }
        return true;
    });
});

DEMO

Upvotes: 2

Related Questions