how to pass two gridview textbox values to a javascript function

Question

hi,i am new to javascript,

my problem is i have a simple date check function as follow

function CompareDates(str1, str2) 
   {
          var dt1 = parseInt(str1.substring(0, 2), 10);
          var mon1 = parseInt(str1.substring(3, 5), 10);
          var yr1 = parseInt(str1.substring(6, 10), 10);
          var dt2 = parseInt(str2.substring(0, 2), 10);
          var mon2 = parseInt(str2.substring(3, 5), 10);
          var yr2 = parseInt(str2.substring(6, 10), 10);
          var date1 = new Date(yr1, mon1, dt1);
          var date2 = new Date(yr2, mon2, dt2);

          if (date2 < date1) {
                alert("To date cannot be greater than from date");
                return false;
          }
          else
          {
                return true;
          } 

      }

In Gridview

        <asp:TemplateField HeaderText="Start Dtae">
                           <ItemTemplate>
                                        <asp:TextBox ID="txtStartDate" runat="server" Text='<%# Bind("StartDate") %>'></asp:TextBox>
                                        <asp:CalendarExtender ID="txtStartDate_CalendarExtender" runat="server" Format="dd/MM/yyyy"                 Enabled="True" TargetControlID="txtStartDate"></asp:CalendarExtender>
                            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="End Dtae">
                           <ItemTemplate>
                                        <asp:TextBox ID="txtEndDate" runat="server" Text='<%# Bind("EndDate") %>' **onchange="CompareDates(txtStartDate.Text,this.Text)**;" ></asp:TextBox>
                                        <asp:CalendarExtender ID="txtEndDate_CalendarExtender" runat="server" Format="dd/MM/yyyy" Enabled="True" TargetControlID="txtEndDate">**strong text**</asp:CalendarExtender>
                           </ItemTemplate>
         </asp:TemplateField>

grid is dynamic and user can add any number of rows to it. my need is to check the date without looping the entire gridview rows on submit button click. onchange of the txtenddate i want to pass the values of both text boxes..

can anybody help me..

Thank You..

Please specify more...If you want to check the textbox value on submit then yu have to apply the loop..Instead that how can you check the value — Pushpendra
– Pushpendra, Commented Sep 18, 2012 at 6:07
i want to pass both values to the function and then check. For that am confuced how to pass the textbox values. or instead can i pass the text boxes itself so that i can full fill my need — Anish Karunakaran
– Anish Karunakaran, Commented Sep 18, 2012 at 6:24

Talha · Accepted Answer · 2012-09-20 04:49:58Z

1

Use GridView_RowDataBound event of gridview and on attributes you can attach the javascript onchange event

void GridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{

    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        if(e.Item.ItemType == ListItemType.Item)
        {
            TextBox txtStartDate = e.Row.FindControl("txtStartDate") as TextBox;
            TextBox txtEndDate= e.Row.FindControl("txtEndDate") as TextBox;

            txtEndDate.Attributes.Add("onchange", "CompareDates('" + txtStartDate.ClientID+ "', '" +txtEndDate.ClientID+ "');");
        }
}

}

And in your javascript function

function CompareDates(ctrlStartID, ctrlEndID) 
{ 
   var startDate = document.getElementByID(ctrlStartID).value; 
   var endDate = document.getElementByID(ctrlEndID).value; 
   //your further code
}

edited Sep 20, 2012 at 4:49

answered Sep 18, 2012 at 7:12

Talha

19.3k8 gold badges53 silver badges66 bronze badges

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

7 Comments

Anish Karunakaran Over a year ago

but the parameter is null.. ie the value at the row data bound. parameter passing is not working.

Talha Over a year ago

have you bind the datasorce to ur gridview?

Pushpendra Over a year ago

The parameter is null in javascript..?? Is your RowDataBound event working. If yes check in browser the code rendered for Textboxes.

Pushpendra Over a year ago

try "CompareDates('"+ txtStart.ClientID +"','"+ txtEnd.ClientID +"')";

Pushpendra Over a year ago

in javascript function CompareDates(ctrlStartID, ctrlEndID) { var str1 = document.getElementByID(ctrlStartID); var str2 = document.getElementByID(ctrlEndID); }

|

Adil Mammadov · Accepted Answer · 2012-09-18 07:04:52Z

0

You can try following code

TextBox txtStartDate = yourGridViewName.SelectedRow.FindControl("txtStartDate") as TextBox;
TextBox txtEndDate = yourGridViewName.SelectedRow.FindControl("txtEndDate") as TextBox;

Then you can get text as normally:

 string startDate = txtStartDate.Text;
 string endDate = txtEndDate .Text;

Please consider that follwong code is not tested. You can try RowDataBound event of GridView to add JavaScript function

protected void yourGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
         //Get TextBoxes
         TextBox txtStartDate = yourGridViewName.SelectedRow.FindControl("txtStartDate") as TextBox;
         TextBox txtEndDate = yourGridViewName.SelectedRow.FindControl("txtEndDate") as TextBox;

         //Get text
         string startDate = txtStartDate.Text;
         string endDate = txtEndDate .Text;

         //Assign the function
         e.Row.Attributes.Add("Onchange", "CompareDates('" + startDate + "', '" + endDate + "'");
    }
}

edited Sep 18, 2012 at 7:04

answered Sep 18, 2012 at 6:25

Adil Mammadov

8,7164 gold badges35 silver badges65 bronze badges

5 Comments

Anish Karunakaran Over a year ago

But how can i call javascript function with this values.. Onchange event is invoking the js function.. i can add the function to each text box on row databound.. but what about the parameters?

Adil Mammadov Over a year ago

please provide, Onchange event of GridViewRow?

Anish Karunakaran Over a year ago

but the parameter is null.. ie the value at the row data bound. parameter passing is not working.

Anish Karunakaran Over a year ago

i did as you suggested but nothing happens..i also tried by passing textbox clinetid and changed the function respectively bt function is invoked there after no response

Adil Mammadov Over a year ago

sorry, but I can't help you further.

Pushpendra · Accepted Answer · 2012-09-19 11:05:35Z

0

The best method I would suggest you is to add the Row_DataBound and in this event read the rows and add the change event programmatically.

void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e) {

if(e.Row.RowType == DataControlRowType.DataRow)
{
            Textbox text1 = ((Textbox )e.Row.FindControl("Textbox1"));
            Textbox text2 = ((Textbox )e.Row.FindControl("Textbox2"));
            text2 .Attributes.Add("onfocus", "EventName('"+text1 .Text+"','"+text1.Text+"')"+);


}

}

edited Sep 19, 2012 at 11:05

answered Sep 18, 2012 at 7:44

Pushpendra

8101 gold badge6 silver badges17 bronze badges

3 Comments

Anish Karunakaran Over a year ago

but the parameter is null.. ie the value at the row data bound. parameter passing is not working.

Anish Karunakaran Over a year ago

i did as you suggested but nothing happens..i also tried by passing textbox clinetid and changed the function respectively bt function is invoked there after no response.

Pushpendra Over a year ago

We are missing single quotes in parameters TextBox text1 = ((TextBox )e.Row.FindControl("Textbox1")); TextBox text2 = ((TextBox )e.Row.FindControl("Textbox2")); text2.Attributes.Add("onblur", "EvName('" + text1.Text + "','" + text2.Text + "')"); Change the Attribute line by adding quotes around parameters. Its working I have tested.

Collectives™ on Stack Overflow

how to pass two gridview textbox values to a javascript function

3 Answers 3

7 Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest