running javascript when textbox value has changed

[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.

 

[Michael Nemtsev]

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

 

[Steven Cheng[MSFT]]

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.



--------------------

From: "Dmitry Duginov" <[email protected]>
Subject: running javascript when textbox value has changed
Date: Tue, 11 Dec 2007 19:45:33 -0500

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

 

[Oren]

you probably don't want to use OnDataSelected because the Roundtrip, write ?

 

[Dmitry Duginov]

Does your callendar have events like "OnDataSelected" or smth?

No events, it is 100% javascript

Another option is to call clearETA() manually after showCalendarControl
method

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

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.

 

[Dmitry Duginov]

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.

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.

 

[Dmitry Duginov]

you probably don't want to use OnDataSelected because the Roundtrip, write
?

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

D.

 

[Steven Cheng[MSFT]]

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]>

Subject: Re: running javascript when textbox value has changed
Date: Wed, 12 Dec 2007 09:18:51 -0500




No events, it is 100% javascript


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.

 

[Dmitry Duginov]

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?

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]>

Subject: Re: running javascript when textbox value has changed
Date: Wed, 12 Dec 2007 09:18:51 -0500

Does your callendar have events like "OnDataSelected" or smth?

No events, it is 100% javascript

Another option is to call clearETA() manually after showCalendarControl
method

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.