running javascript when textbox value has changed

  • Thread starter Thread starter Dmitry Duginov
  • Start date Start date
D

Dmitry Duginov

Hi,

I need to clear the value in one textbox (dataEta) when user is changing the
value in another one (dataPickUpDate)

The following code works fine for typing in the textbox and cut-n-pasting
into it (onkeypress and onchange events fire)

protected void FormView1_DataBound(object sender, EventArgs e)
{
if (FormView1.CurrentMode == FormViewMode.Edit)
{
TextBox pickuptextbox =
(TextBox)FormView1.FindControl("dataPickUpDate");
TextBox ETAtextbox = (TextBox)FormView1.FindControl("dataEta");
pickuptextbox.Attributes.Add("onchange",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickuptextbox.Attributes.Add("onkeypress",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
}
}

....
<script language=javascript type="text/javascript">
function clearETA(TextBox)
{
var textboxETA = document.getElementById(TextBox);
if (textboxETA!=null)
textboxETA.value='';
}
</script>

However, user also can select the new value using calendar pop-up control:

<asp:TextBox runat="server" ID="dataEta"
Text='<%# Bind("Eta", "{0:d}") %>' />
<asp:ImageButton ID="cal_dataPickUpDate" runat="server"
OnClientClick = "javascript:showCalendarControl(this.previousSibling);return
false;"/>

Of course, in this case neither onchange nor onkeypress fires.

How would I ensure that clearETA() javascript function called when the user
selects the date from the calendar pop-up? I am reluctant to make changes in
showCalendarControl() because it is used application-wide and usually this
extra functionality is not required. What are my options?

D.
 
Does your callendar have events like "OnDataSelected" or smth?
Another option is to call clearETA() manually after showCalendarControl method
 
Hi Dmitry,

I agree with Michael that the proper chance to make your textbox get
updated is something in the datetimepicker control. As it will raise a
popup windows for date picking, is there any chance that we can register
script handler or add script into the date time picking period so as to
call a script function after the user finishing select the date? Elsewise,
it will be hard to automatically detect window popup from textbox's view.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.



--------------------
 
Michael Nemtsev said:
Does your callendar have events like "OnDataSelected" or smth?
Click to expand...

No events, it is 100% javascript
Another option is to call clearETA() manually after showCalendarControl
method
Click to expand...

That's what I'd like to do. But I cannot figure out how to pass the correct
ClientID as a parameter to clearETA() in markup.

The following works:

<asp:TextBox
runat="server"
ID="dataPickUpDate"
Text='<%# Bind("PickUpDate", "{0:d}") %>'
/>

<asp:ImageButton
ID="cal_dataPickUpDate"
runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('ctl00_ContentPlaceHolder1_FormView1_dataEta');return
false;"
/>

But for obvious reasons I cannot hardcode
'ctl00_ContentPlaceHolder1_FormView1_dataEta' as ClientId

And I cannot use the following markup...

OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('<%=FormView1.FindControl("dataEta").ClientID%>');return
false;"

....because when it is evaluated before FormView is databound...

Please advise.

D.
--
WBR, Michael Nemtsev [.NET/C# MVP].
Blog: http://spaces.live.com/laflour



Dmitry Duginov said:
Hi,

I need to clear the value in one textbox (dataEta) when user is changing
the
value in another one (dataPickUpDate)

The following code works fine for typing in the textbox and cut-n-pasting
into it (onkeypress and onchange events fire)

protected void FormView1_DataBound(object sender, EventArgs e)
{
if (FormView1.CurrentMode == FormViewMode.Edit)
{
TextBox pickuptextbox =
(TextBox)FormView1.FindControl("dataPickUpDate");
TextBox ETAtextbox = (TextBox)FormView1.FindControl("dataEta");
pickuptextbox.Attributes.Add("onchange",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickuptextbox.Attributes.Add("onkeypress",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
}
}

....
<script language=javascript type="text/javascript">
function clearETA(TextBox)
{
var textboxETA = document.getElementById(TextBox);
if (textboxETA!=null)
textboxETA.value='';
}
</script>

However, user also can select the new value using calendar pop-up
control:

<asp:TextBox runat="server" ID="dataEta"
Text='<%# Bind("Eta", "{0:d}") %>' />
<asp:ImageButton ID="cal_dataPickUpDate" runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);return
false;"/>

Of course, in this case neither onchange nor onkeypress fires.

How would I ensure that clearETA() javascript function called when the
user
selects the date from the calendar pop-up? I am reluctant to make changes
in
showCalendarControl() because it is used application-wide and usually
this
extra functionality is not required. What are my options?

D.
Click to expand...
Click to expand...
 
Steven Cheng said:
Hi Dmitry,

I agree with Michael that the proper chance to make your textbox get
updated is something in the datetimepicker control. As it will raise a
popup windows for date picking, is there any chance that we can register
script handler or add script into the date time picking period so as to
call a script function after the user finishing select the date?
Elsewise,
it will be hard to automatically detect window popup from textbox's view.
Click to expand...

The actual problem here is how to pass proper ClientId for the textbox to
clear to the javascript declared in OnClientClick. Please see my reply to
Michael...

D.
 
Oren said:
you probably don't want to use OnDataSelected because the Roundtrip, write
?
Click to expand...

It is not ASP.NET Calendar control, it's built on the fly by 100%
javascript.

D.
 
Hi Dmitry,

If you're wondering how to pass the TextBox's clientID into the
ImageButton's client-side script, how abou the following approach:

You can add "PreRender" event handler for the ImageButton control, in that
event, you can get the ClientID from the certain Textbox and then
programmatically set imagebutton's "OnClientclick" property?

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.



--------------------
From: "Dmitry Duginov" <[email protected]>
References: <[email protected]>
Click to expand...
Subject: Re: running javascript when textbox value has changed
Date: Wed, 12 Dec 2007 09:18:51 -0500


Michael Nemtsev said:
Does your callendar have events like "OnDataSelected" or smth?
Click to expand...

No events, it is 100% javascript
Another option is to call clearETA() manually after showCalendarControl
method
Click to expand...

That's what I'd like to do. But I cannot figure out how to pass the correct
ClientID as a parameter to clearETA() in markup.

The following works:

<asp:TextBox
runat="server"
ID="dataPickUpDate"
Text='<%# Bind("PickUpDate", "{0:d}") %>'
/>

<asp:ImageButton
ID="cal_dataPickUpDate"
runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('ctl00_Conte ntPlaceHolder1_FormView1_dataEta');return
false;"
/>

But for obvious reasons I cannot hardcode
'ctl00_ContentPlaceHolder1_FormView1_dataEta' as ClientId

And I cannot use the following markup...

OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('<%=FormView 1.FindControl("dataEta").ClientID%>');return
false;"

...because when it is evaluated before FormView is databound...

Please advise.

D.
--
WBR, Michael Nemtsev [.NET/C# MVP].
Blog: http://spaces.live.com/laflour



Dmitry Duginov said:
Hi,

I need to clear the value in one textbox (dataEta) when user is changing
the
value in another one (dataPickUpDate)

The following code works fine for typing in the textbox and cut-n-pasting
into it (onkeypress and onchange events fire)

protected void FormView1_DataBound(object sender, EventArgs e)
{
if (FormView1.CurrentMode == FormViewMode.Edit)
{
TextBox pickuptextbox =
(TextBox)FormView1.FindControl("dataPickUpDate");
TextBox ETAtextbox = (TextBox)FormView1.FindControl("dataEta");
pickuptextbox.Attributes.Add("onchange",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickuptextbox.Attributes.Add("onkeypress",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
}
}

....
<script language=javascript type="text/javascript">
function clearETA(TextBox)
{
var textboxETA = document.getElementById(TextBox);
if (textboxETA!=null)
textboxETA.value='';
}
</script>

However, user also can select the new value using calendar pop-up
control:

<asp:TextBox runat="server" ID="dataEta"
Text='<%# Bind("Eta", "{0:d}") %>' />
<asp:ImageButton ID="cal_dataPickUpDate" runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);return
false;"/>

Of course, in this case neither onchange nor onkeypress fires.

How would I ensure that clearETA() javascript function called when the
user
selects the date from the calendar pop-up? I am reluctant to make changes
in
showCalendarControl() because it is used application-wide and usually
this
extra functionality is not required. What are my options?

D.
Click to expand...
Click to expand...
Click to expand...
 
Steven Cheng said:
Hi Dmitry,

If you're wondering how to pass the TextBox's clientID into the
ImageButton's client-side script, how abou the following approach:

You can add "PreRender" event handler for the ImageButton control, in that
event, you can get the ClientID from the certain Textbox and then
programmatically set imagebutton's "OnClientclick" property?
Click to expand...

Great, thanks. I've placed it together with two other calls for this script.
Works fine.

protected void FormView1_DataBound(object sender, EventArgs e)
{
if (FormView1.CurrentMode == FormViewMode.Edit)
{
TextBox pickuptextbox =
(TextBox)FormView1.FindControl("dataPickUpDate");
TextBox ETAtextbox = (TextBox)FormView1.FindControl("dataEta");
ImageButton pickupCalendarButton =
(ImageButton)FormView1.FindControl("cal_dataPickUpDate");
pickuptextbox.Attributes.Add("onchange",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickuptextbox.Attributes.Add("onkeypress",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickupCalendarButton.OnClientClick =
String.Format("javascript:showCalendarControl(this.previousSibling);clearETA('{0}');return
false;", ETAtextbox.ClientID);
}
}

Regards,
D.
Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no
rights.



--------------------
From: "Dmitry Duginov" <[email protected]>
References: <[email protected]>
Click to expand...
Subject: Re: running javascript when textbox value has changed
Date: Wed, 12 Dec 2007 09:18:51 -0500


Michael Nemtsev said:
Does your callendar have events like "OnDataSelected" or smth?
Click to expand...

No events, it is 100% javascript
Another option is to call clearETA() manually after showCalendarControl
method
Click to expand...

That's what I'd like to do. But I cannot figure out how to pass the correct
ClientID as a parameter to clearETA() in markup.

The following works:

<asp:TextBox
runat="server"
ID="dataPickUpDate"
Text='<%# Bind("PickUpDate", "{0:d}") %>'
/>

<asp:ImageButton
ID="cal_dataPickUpDate"
runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('ctl00_Conte ntPlaceHolder1_FormView1_dataEta');return
false;"
/>

But for obvious reasons I cannot hardcode
'ctl00_ContentPlaceHolder1_FormView1_dataEta' as ClientId

And I cannot use the following markup...

OnClientClick =
"javascript:showCalendarControl(this.previousSibling);clearETA('<%=FormView 1.FindControl("dataEta").ClientID%>');return
false;"

...because when it is evaluated before FormView is databound...

Please advise.

D.
--
WBR, Michael Nemtsev [.NET/C# MVP].
Blog: http://spaces.live.com/laflour



:

Hi,

I need to clear the value in one textbox (dataEta) when user is changing
the
value in another one (dataPickUpDate)

The following code works fine for typing in the textbox and cut-n-pasting
into it (onkeypress and onchange events fire)

protected void FormView1_DataBound(object sender, EventArgs e)
{
if (FormView1.CurrentMode == FormViewMode.Edit)
{
TextBox pickuptextbox =
(TextBox)FormView1.FindControl("dataPickUpDate");
TextBox ETAtextbox = (TextBox)FormView1.FindControl("dataEta");
pickuptextbox.Attributes.Add("onchange",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
pickuptextbox.Attributes.Add("onkeypress",
String.Format("clearETA('{0}');", ETAtextbox.ClientID));
}
}

....
<script language=javascript type="text/javascript">
function clearETA(TextBox)
{
var textboxETA = document.getElementById(TextBox);
if (textboxETA!=null)
textboxETA.value='';
}
</script>

However, user also can select the new value using calendar pop-up
control:

<asp:TextBox runat="server" ID="dataEta"
Text='<%# Bind("Eta", "{0:d}") %>' />
<asp:ImageButton ID="cal_dataPickUpDate" runat="server"
OnClientClick =
"javascript:showCalendarControl(this.previousSibling);return
false;"/>

Of course, in this case neither onchange nor onkeypress fires.

How would I ensure that clearETA() javascript function called when the
user
selects the date from the calendar pop-up? I am reluctant to make changes
in
showCalendarControl() because it is used application-wide and usually
this
extra functionality is not required. What are my options?

D.
Click to expand...
Click to expand...
Click to expand...
 
Back
Top