javascript function problems

  • Thread starter Thread starter hal
  • Start date Start date
H

hal

I'm creating an asp.net page using c# and javascript. I have three
different controls on the page, and only when all three have been
accessed i want an imagebutton to go from disabled to enabled and
change its image. I somewhat got it working. I'm able to change the
image and have the imagebutton go from disabled to enabled using one
control at a time, but can't figure out to have the button do this
only after all three controls have been accessed. Below is my code:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>

<script type="text/javascript">
function SetImage()
{
if
((window.document.getElementById("TextBox1").attributes.length > 0) &&

(window.document.getElementById("DropDownList1").attributes.length >
0) &&

(window.document.getElementById("CheckBox1").attributes.length > 0))
{
document.all("ImageButton1").src = "Images/
enable.jpg";

window.document.getElementById("ImageButton1").disabled = false;
}
}

</script>

<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Select A Location</asp:ListItem>
<asp:ListItem>Virginia</asp:ListItem>
<asp:ListItem>Florida</asp:ListItem>
<asp:ListItem>New York</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"
onkeyup="SetImage()"></asp:TextBox>
<br />
<br />
<asp:CheckBox ID="CheckBox1" onclick="SetImage()" Text="I
Agree" runat="server" />
<br />
<br />
<asp:ImageButton ID="ImageButton1" Enabled="False"
runat="server" ImageUrl="~/Images/disable.jpg" />
</form>
</body>
</html>

/////CODE BEHIND//////
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DropDownList1.Attributes.Add("onchange", "SetImage()");
}
}
 
hal said:
I'm creating an asp.net page using c# and javascript. I have three
different controls on the page, and only when all three have been
accessed i want an imagebutton to go from disabled to enabled and
change its image. I somewhat got it working. I'm able to change the
image and have the imagebutton go from disabled to enabled using one
control at a time, but can't figure out to have the button do this
only after all three controls have been accessed. Below is my code:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>

<script type="text/javascript">
function SetImage()
{
if
((window.document.getElementById("TextBox1").attributes.length > 0) &&

(window.document.getElementById("DropDownList1").attributes.length >
0) &&

(window.document.getElementById("CheckBox1").attributes.length > 0))
{
document.all("ImageButton1").src = "Images/
enable.jpg";

window.document.getElementById("ImageButton1").disabled = false;
}
}

</script>

<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Select A Location</asp:ListItem>
<asp:ListItem>Virginia</asp:ListItem>
<asp:ListItem>Florida</asp:ListItem>
<asp:ListItem>New York</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"
onkeyup="SetImage()"></asp:TextBox>
<br />
<br />
<asp:CheckBox ID="CheckBox1" onclick="SetImage()" Text="I
Agree" runat="server" />
<br />
<br />
<asp:ImageButton ID="ImageButton1" Enabled="False"
runat="server" ImageUrl="~/Images/disable.jpg" />
</form>
</body>
</html>

/////CODE BEHIND//////
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DropDownList1.Attributes.Add("onchange", "SetImage()");
}
}
Click to expand...

I'm not sure what you're trying to achieve where you're testing a HTML
elements attributes collection for a length > 0. A HTML element attributes
collection will never be zero length.

Change the calls to SetImage() to SetImage.call(this) on the TextBox1 and
CheckBox1.


/////CODE BEHIND//////
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DropDownList1.Attributes.Add("onchange", "SetImage.call(this)");
ImageButton1.Attributes.Add("enabledSrc",
ResolveURL("~/Images/enable.jpg"));
}
}

The javascript:-

var goControlsVisited = {DropDownList1: false, TextBox1: false, CheckBox1:
false}

function SetImage()
{
goControlsVisited[this.id] = true;

if (allTrue(goControlsVisited))
{
var img = document.getElementById("ImageButton1")
img.disabled = false
img.src = img.getAttribute("enabledSrc")
}

function allTrue(o)
{
for (key in o)
if (!o[key]) return false
return true;
}
}
 
Back
Top