Set the value of Textbox in Gridview using Jquery

Question

I have a grid view grdtest. I want to update a textbox in the gride using JQuery from a modal dialog that appears on an anchor click. I have added the code but the modal dialog updates all the textboxes in the grid. How can I update only the textbox in the same row as the anchor?

The html code is

<div id="output">
<asp:GridView ID="grdtest" CssClass="grid" Width="20%" AutoGenerateColumns="false" runat="server"
 DataKeyNames="ID" OnRowCreated="grdtest_RowCreated" OnRowCommand="grdtest_RowCommand">
<Columns>
<asp:BoundField DataField="ID" Visible="false" />
<asp:BoundField HeaderText="NAME"  DataField="NAME" ItemStyle-Width="5%"/>
<asp:TemplateField HeaderText="MONTH" ItemStyle-Width="5%">
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Wrap="true"></asp:TextBox>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate><a href="#" >Month</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
        <tr>
            <td class="web_dialog_title">Month Chooser</td>
            <td class="web_dialog_title align_right">
                <a href="#" id="btnClose">Close</a>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <b>Choose the months from the list </b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <div id="months">
                    <input id="month1" name="month" type="checkbox" value="Jan" />January
                    <input id="month2" name="month" type="checkbox" value="Feb" />February
                    <input id="month3" name="month" type="checkbox" value="Mar" />March
                    <input id="month4" name="month" type="checkbox" value="Apr" />April
                    <input id="month5" name="month" type="checkbox" value="May" />May
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input id="btnSubmit" type="button" value="Submit" />
            </td>
        </tr>
    </table>
</div>
</form>
</body>

The js code is

<script type="text/javascript">

    $(document).ready(function ()
    {
        $("#btnClose").click(function (e)
        {
            HideDialog();
            e.preventDefault();
        });


        $('#btnSubmit').click(function(e)
        {
            var sub = [];
            $(':checkbox:checked').each(function(i){
            sub[i] = $(this).val();
            });
            $("#grdtest").find("input[type=text][id*=txtsubject]").val(sub);
            HideDialog();
            e.preventDefault();
        });

    });

    function ShowDialog(modal)
    {
        $("#overlay").show();
        $("#dialog").fadeIn(300);

        if (modal)
        {
            $("#overlay").unbind("click");
        }
        else
        {
            $("#overlay").click(function (e)
            {
                HideDialog();
            });
        }
    }

    function HideDialog()
    {
        $("#overlay").hide();
        $("#dialog").fadeOut(300);
    } 

</script>

Answer 1

You need to get the index of the textbox first. Then update the value using the index.

I have used the below code for my application. Works well..

$('[id*=txtBindSplitPercent]').change(function () {
            var value = $(this).val();
            index = $(this).closest('tr').index();
            if (value.trim() != '') {
                $(this).val(100);
            }
        });

Answer 2

You could add something to your link click method that gives the textbox a specific class that you can later target so you only target one like:

$(".openModalLink").click(function(){
    $(this).parent().parent()
        .find("input[type=text][id*=txtsubject]").addClass("ChangeMe");
    ShowDialog();
}

You should add a class to the <a href="#" class="your class name">Month</a> in your gridview. In my case it would be openModalLink. Then your submit function would look like:

    $('#btnSubmit').click(function(e)
    {
        var sub = [];
        $(':checkbox:checked').each(function(i){
        sub[i] = $(this).val();
        });
        $("#grdtest").find(".ChangeMe").val(sub);
        HideDialog();
        e.preventDefault();
    });

And in your HideDialog remove the specific class from all the textboxes.

function HideDialog()
{
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
    $("#grdtest").find("input[type=text][id*=txtsubject]").removeClass("ChangeMe");
}

Hope this helps and is what you were looking for.