Copy value from one textbox to another with jQuery in multiple gridview rows

Question

I have a grid view that the user can add 1 or more rows to at a time. I need to copy the begin date to the end date textbox if the end date textbox is empty. I have this working if the grid was empty when the rows are added, but I can't figure out how to do this when later adding rows to the grid.

This is because I may only have two rows with textboxes so the array of them only has 2 entries, but my row index might indicate this is the 6th row. I can't figure out how to determine what textbox is being used so I can copy to the end date textbox in the same row.

GridView

<asp:GridView ID="gvOfferingDates" runat="server" 
    AutoGenerateColumns="False" 
    onrowdatabound="gvOfferingDates_RowDataBound" 
    onrowediting="gvOfferingDates_RowEditing" 
    onrowcancelingedit="gvOfferingDates_RowCancelingEdit" 
    onrowupdated="gvOfferingDates_RowUpdated" 
    onrowupdating="gvOfferingDates_RowUpdating" Width="100%" >
    <Columns>
        <asp:TemplateField>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemTemplate>
                <asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="~/Images/Edit.png" Visible='<%# !IsEditable(Eval("NewRow")) %>' />
                <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="~/Images/Delete.png" Visible='<%# IsEditable(Eval("NewRow")) %>' />
                <asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="~/Images/undo.png" CausesValidation="False" Visible='<%# EditMode %>' />--%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Begin Date">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblBeginDate" Text='<%# Eval("BeginDate", "{0:MM/dd/yyyy}") %>' Visible='<%# !IsEditable(Eval("NewRow")) %>'></asp:Label>
                <asp:Label runat="server" ID="lblBeginDateEdit" Text='<%# Eval("BeginDate", "{0:MM/dd/yyyy}") %>' Visible="false"></asp:Label>
                <asp:Label ID="lblBeginRequired" runat="server" Text="*" ForeColor="Red" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:Label>&nbsp;
                <asp:TextBox CssClass="begindate" ID="txtBeginDate" runat="server" Visible='<%# IsEditable(Eval("NewRow")) %>' BackColor="#FFFACD"></asp:TextBox>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderText="End Date">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblEndDate" Text='<%# Eval("EndDate", "{0:MM/dd/yyyy}") %>' Visible='<%# !IsEditable(Eval("NewRow")) %>'></asp:Label>
                <asp:Label runat="server" ID="lblEndDateEdit" Text='<%# Eval("EndDate", "{0:MM/dd/yyyy}") %>' Visible="false"></asp:Label>
                <asp:Label ID="lblEndRequired" runat="server" Text="*" ForeColor="Red" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:Label>&nbsp;
                <asp:TextBox CssClass="enddate" ID="txtEndDate" runat="server" BackColor="#FFFACD" CausesValidation="True" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

jQuery

$(document).ready(function() {
    $(".begindate").datepicker({
        onSelect: function(dateText, ui) {
            var bDate = $(this).val();
            var iRowIndex = $(this).closest("tr").prevAll("tr").length;
            var $arrT = $('#<%=gvOfferingDates.ClientID %>').find('input:text[id$="txtEndDate"]');
            var txtEnd = $($arrT[iRowIndex - 1]);


            if ($($txtEnd).val().length == 0) {
                $($txtEnd).val(bDate);
            }
        },
        changeMonth: true, changeYear: true, minDate: new Date()
    }).on("change", function() {
        $(this).blur()
    });

    $(".enddate").datepicker({
        onSelect: function() {
            minDate: new Date($(".begindate"))
        },
        changeMonth: true, changeYear: true, minDate: new Date($(".begindate"))
    });

Update

Changing the jquery to the much simpler below worked for new records and adding to existing ones.

$(".begindate").datepicker({
    onSelect: function(dateText, ui) {
        var bDate = $(this).val();

        var txtEnd = $(this).closest("tr").find('input:text[id$="txtEndDate"]');
        if (txtEnd.val().length == 0) {
            txtEnd.val(bDate);
        }

    },
    changeMonth: true, changeYear: true, minDate: new Date()
}).on("change", function() {
    $(this).blur()
});

Mateus Schneiders · Accepted Answer · 2014-04-24 15:33:13Z

0

If you have the begindate element, you should be able to access the enddate element with the following steps:

Get the closest TR parent element.
Search inside the TR children elements for an input with an enddate id . Both the textboxes should be in the same table row.

I'm not sure, but it would be something like this:

 var txtEnd = $(begindateElement).closest("tr").find('input:text[id$="txtEndDate"]');

answered Apr 24, 2014 at 15:33

Mateus Schneiders

4,9133 gold badges23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tonya Over a year ago

Thank you! Here's what worked: var txtEnd = $(this).closest("tr").find('input:text[id$="txtEndDate"]');

Collectives™ on Stack Overflow

Copy value from one textbox to another with jQuery in multiple gridview rows

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related