Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need help with Javascript/Postback issue 1

Status
Not open for further replies.

linuxjr

Programmer
Jun 2, 2001
135
0
0
US
I am almost done with my project and I'm having trouble finding what is causing this problem.

I have on my form for this example a checkbox, two textbox's and a button. I was trying to implement a simple javascript function that if a user checks the check box it will fill the two textboxes with the current date and time. I know my javascript works fine but when the button is pressed it resets my controls back. Here is the code to further explain my problem:

My Javascript code as follows:
Code:
<script language="javascript">
    function checkbox(){
        var dateVar = new Date();
	var timevar =  dateVar.getHours() + ":" + dateVar.getMinutes();
	if(document.Form1.chkPhone.checked){
    	    document.Form1.txtCallBackDate.style.backgroundColor='#ffffff';
    	    document.Form1.txtCallBackDate.readOnly= false;
    	    document.Form1.txtCallBackDate.value = formatDate(dateVar);
	    document.Form1.txtCallBackDate.disabled = false;
	    document.Form1.txtCallBackTime.style.backgroundColor='#ffffff';
	    document.Form1.txtCallBackDate.readOnly = false;
	    document.Form1.txtCallBackTime.value = timevar;
	    document.Form1.txtCallBackTime.disasble = false;
	}
	else{
	    document.Form1.txtCallBackDate.style.backgroundColor='#ffff80';
	    document.Form1.txtCallBackDate.readOnly = true;
	    document.Form1.txtCallBackDate.value = "";
	    document.Form1.txtCallBackDate.disabled = true;
	    document.Form1.txtCallBackTime.style.backgroundColor='#ffff80';
	    document.Form1.txtCallBackTime.readOnly = true;
	    document.Form1.txtCallBackTime.value = "";
	    document.Form1.txtCallBackTime.disabled = true;
	}
    }
</script>

Here are my controls in the web form and how they are setup:

Code:
<asp:TextBox ID="txtCallBackDate" Runat="server" CssClass="TextBox" AutoPostBack="False" ReadOnly="True"	BackColor="#FFFF80"></asp:TextBox>

<asp:TextBox ID="txtCallBackTime" Runat="server" CssClass="TextBox" AutoPostBack="False" ReadOnly="True"	BackColor="#FFFF80"></asp:TextBox>

I have this in my page load in my codebehind:

Code:
private void Page_Load(object sender, System.EventArgs e){
	// Put user code to initialize the page here
	if (!Page.IsPostBack){
	    chkPhone.Attributes.Add("onclick","checkbox()");
	}			
}

After stepping through all my code I see the attributes are set up correctly. The javascript function fires correctly when you check and uncheck the checkbox. Here is what is happening. The form loads with my textboxes being "disabled" and the checkbox is unchecked. When I click on the checkbox it enables the textboxes and fills in the date/time. When I click on the button it submits causing the page to postback my textboxes become "disabled" again. I just can not figure out what is causing this problem and I am stumped.

So any tips, suggestions or something I did wrong please let me know and I appreciate it. Have a nice day.
 
You have the ReadOnly property set to TRUE for the textboxes. Each time there is a postback, that property will be set. You need to check in the Page_Load event if the check box is checked, and set the readonly property accordingly.

Jim
 
Jim,

Thank you for replying. I moved the readonly attribute into my page load and added this code:

if(!chkPhone.Checked){
txtCallBackDate.ReadOnly = true;
}

I am still getting the same problem where when the page postbacks it changes the backcolor to #ffff80 and disabled with the date and time filled in.
 
Change the properties set in the properties window of the textboxes:

Ex, change:
Code:
<asp:TextBox ID="txtCallBackTime" Runat="server" CssClass="TextBox" AutoPostBack="False" ReadOnly="True"    BackColor="#FFFF80"></asp:TextBox>

To

Code:
<asp:TextBox ID="txtCallBackTime" Runat="server" CssClass="TextBox" AutoPostBack="False"></asp:TextBox>

 
Jim,
Thanks for replying so quickly. I meant to added in my previous post that is what my textbox's are like now.

I still get the same error where it posts back and my textboxes turn back to yellow/readonly even with the checkbox checked.
 
Here is the updated code:
HTML Code
Code:
<HTML>
    <HEAD>
	<title>Checkbox Problem</title>
	<link href="Style.css" rel="stylesheet" type="text/css">
	<script src="dateformat.js" type="text/javascript"></script>
	<script src="calendar.js" type="text/javascript"></script>
	<script src="calendar-setup.js" type="text/javascript"></script>
	<script src="lang/calendar-en.js" type="text/javascript"></script>
	<style type="text/css">@import url( calendar-win2k-cold-1.css ); 
		</style>
		<script language="javascript">
		function checkbox(){
			var dateVar = new Date();
			var timevar =  dateVar.getHours() + ":" + dateVar.getMinutes();
			if(document.Form1.chkPhone.checked){
				document.Form1.txtCallBackDate.style.backgroundColor='#ffffff';
				document.Form1.txtCallBackDate.value = formatDate(dateVar);
				document.Form1.txtCallBackDate.disabled = false;
				document.Form1.btnCallBackDate.disabled = false;
				document.Form1.txtCallBackTime.disabled = false;
				document.Form1.txtCallBackDate.readOnly = false;
				document.Form1.txtCallBackTime.readOnly = false;
				document.Form1.txtCallBackTime.style.backgroundColor='#ffffff';
				document.Form1.txtCallBackTime.value = timevar;
			}
			else{
				document.Form1.txtCallBackDate.value = "";
				document.Form1.txtCallBackDate.disabled = true;
				document.Form1.btnCallBackDate.disabled = true;
				document.Form1.txtCallBackTime.value = "";
				document.Form1.txtCallBackTime.disabled = true;
				document.Form1.txtCallBackTime.style.backgroundColor='#ffff80';
				document.Form1.txtCallBackDate.style.backgroundColor='#ffff80';
				document.Form1.txtCallBackDate.readOnly = true;
				document.Form1.txtCallBackTime.readOnly = true;
			}
		}
		</script>
	</HEAD>
	<body topmargin="0">
		<form id="Form1" method="post" runat="server">
			<table id="Table1" cellSpacing="0" cellPadding="0" border="0">
				<tbody vAlign="top" align="left">
					<tr vAlign="top" align="left">
						<td vAlign="top" align="left">
<asp:checkbox id="chkPhone" Runat="server" Text="Phone Response" TextAlign="Right" AutoPostBack="False"></asp:checkbox></td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left" colspan="2" style="HEIGHT: 18px">
						</td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left">
							Call Back Date
						</td>
						<td valign="top" align="left">
							<asp:TextBox ID="txtCallBackDate" Runat="server" CssClass="TextBox" AutoPostBack="False"></asp:TextBox>
							<asp:Button ID="btnCallBackDate" Runat="server" CssClass="Button" Text="..."></asp:Button>
							<script type="text/javascript">
								Calendar.setup({
									inputField   : "txtCallBackDate",
									button       : "btnCallBackDate",
									ifFormat     : "%m/%d/%Y",
									align	     : "Tr"
								});
							</script>
						</td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left" colspan="2" style="HEIGHT: 18px">
						</td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left">
							Call Back Time
						</td>
						<td valign="top" align="left">
							<asp:TextBox ID="txtCallBackTime" Runat="server" CssClass="TextBox" AutoPostBack="False"></asp:TextBox>
						</td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left" colspan="2" style="HEIGHT: 21px">
						</td>
					</tr>
					<tr valign="top" align="left">
						<td valign="top" align="left" colspan="2">
							<asp:Button ID="btnUpdate" Runat="server" CssClass="Button" Text="Update Form"></asp:Button>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</HTML>

CodeBehind
Code:
		private void Page_Load(object sender, System.EventArgs e)
		{
			// Put user code to initialize the page here
			if(!Page.IsPostBack){
				chkPhone.Attributes.Add("onclick","checkbox()");
			}
			if(!chkPhone.Checked){
				txtCallBackDate.Text = "";
				txtCallBackDate.ReadOnly=true;
				txtCallBackDate.BackColor = ColorTranslator.FromHtml("#FFFF80");
				btnCallBackDate.Enabled=false;
				txtCallBackTime.Text = "";
				txtCallBackTime.ReadOnly=true;
				txtCallBackTime.BackColor = ColorTranslator.FromHtml("#FFFF80");
			}
		}
 
In quickly looking at your code, I belive you need an ELSE statement to account for when then checkbox (chkPhone) is checked.

Jim
 
Jim,

I want to thank you for all your time helping me with this problem. It finally works but can you help me understand why I had to include an else statement? I was under the impression that my javascript was enabling the textbox's so when the post back fires the checkbox is checked and should not revert back to disabled/yellow background. So I'm curious why without an else statement it turned my textbox's back??

Again thank you for your time and have a nice day.
 
I'm not exactly sure what that is happening. Perhaps some guru here could answer that. The only thing I can think of is that because you are setting properties client side(ie javascript), that it does not get saved into the view state, but I am not positive.

Jim

P.S. Glad it is working for you
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top