disabling/enabling input type = image

liunx · Jan 10, 2008

i have two image gifs - A and B that act as submit buttons 
 
in the beginning i want A to be enabled and B to be disabled. 
then after A is clicked, I want B to be enabled. 
also, is it possible to have a message pop up if the user clicks B while it is disabled? any help appreciated.here is what i have so far. i have the second button disabled in the beginning. but once i click the first button which is login...the second button doesn't get enabled. what am i doing wrong? 
 
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="JavaScript"> 
function UploadComplete(form) { 
alert("button enabled"); 
} 
 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
 
if(document.getElementById("list").disabled == true) 
{ 
document.getElementById("list").disabled = false; 
} 
 
 
var local = "file://"; 
if (username && password && server) { 
window.open(local, '_blank', 
'toolbar=yes,location=yes,status=yes,' + 
'scrollbars=auto,copyhistory=no,menubar=no,width=' 
+ ((screen.AvailWidth/2)-12) + ',height=' + 
(screen.AvailHeight-150-screen.AvailHeight/2) +',left=0,top=' + ((screen.AvailHeight/2+30)) 
+ '),resizable=yes'); 
window.open("ftp://" + username + ":" + 
password + "@" + server, '_blank', 
'toolbar=yes,location=yes,status=yes,' + 
'scrollbars=auto,copyhistory=no,menubar=no,width=' 
+ ((screen.AvailWidth/2)-12) + ',height=' 
+ (screen.AvailHeight-150-screen.AvailHeight/2) +',left=' + ((screen.AvailWidth/2)) 
+ '),top=' + ((screen.AvailHeight/2+30)) 
+ '),resizable=yes'); 
} 
else { 
alert("Please enter a username, password, and server name"); 
} 
} 
</script> 
 
</HEAD> 
 
 
<TITLE>Client</TITLE> 
 
 
<BODY> 
<H1><img src=http://www.webdeveloper.com/forum/archive/index.php/"matrix_head.jpg" width="900" height="100"><img src="matrix_title.jpg" width="900" height="40"></H1> 
<form name="StartupForm"> 
 
 <img src=http://www.webdeveloper.com/forum/archive/index.php/"login.jpg" width="500" height="22"> 
 
<table width='87%' border='0' cellpadding='0' cellspacing='1'> 
<tr> 
<td width="21%" align='right'>Username: </td> 
<td colspan="3"> <input type='text' 
name='username' value='system' size='20' 
maxlength='20'>   </td> 
</tr> 
<tr> 
<td align='right'><div align="right">Password: </div></td> 
<td colspan="3" class='darkcell'> <input type='password' 
name='password' value='blah' size='20' 
maxlength='20'>   </td> 
</tr> 
<tr> 
<td align='right'><div align="right"> Server: </div></td> 
<td width="19%" class='darkcell'> <input type='text' 
name='server' value='ussv' size='20' 
maxlength='120'>    </td> 
<td width="14%" class='darkcell'><input name="login" type="image" style='color:#000000' onClick='Login(this.form)' value='Select Device File' 
src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"login_button.jpg" align="middle"></td> 
<td width="46%" class='darkcell'><input name="list" type="image" disabled onClick="UploadComplete(form)" value="Upload Complete/Start Data Conversion!" 
src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"view_file_button.jpg" ></td> 
 
</tr> 
</table> 
 
</form> 
 
</HTML>Once an element is disabled it has no properties when using events. 
This method sets a boolen to determin the condition of the buttons/process. 
JavaScript 
 
var LOGIN=false; 
function UploadComplete(f) { 
if(LOGIN) { 
alert("button enabled"); 
} 
else { 
alert("Login first"); 
} 
} 
function Login(f) { 
if(LOGIN) { 
UploadComplete(f); 
} 
else { 
if(username && password && server) { 
// process input 
LOGIN=true; 
} 
else { 
alert("Please enter a username, password, and server name"); 
} 
} 
} 
 
HTML 
 
<input name="login" type="image" onclick="Login(this);" value="Select Device File" src=http://www.webdeveloper.com/forum/archive/index.php/"login_button.jpg" /> 
<input name="list" type="image" onclick="UploadComplete(this);" value="Upload Complete/Start Data Conversion!" src=http://www.webdeveloper.com/forum/archive/index.php/"view_file_button.jpg" /> 
 
 
BTY You tried to document.getElementById("list").disabled == true when there was only name and no idthanks for the help fang. but is there a way to disable the second button in the beginning. and the ENABLE it later after the first button has been clicked?Yes, but you will have to change your input to button. (semantically better) 
 
This goes in Login() and is processed if the login is successful. 
document.getElementById("list").removeAttribute("disabled"); 
document.getElementById("listImg").setAttribute("alt", "enabled"); 
 
The input change to button: 
<button type="button" disabled="disabled" name="list" id="list" onclick="UploadComplete(this);" value="Upload Complete/Start Data Conversion!" style="border:0;background:transparent;"><img id="listImg" alt="disabled" src=http://www.webdeveloper.com/forum/archive/index.php/"bullet_b.gif" /></button> 
 
Now you have a tooltip "disabled" initially which is changed to "enabled" once login is successful. 
The style hides the button. 
 
Why the change to button: the DOM is still very patchy in all browsers, particularly with form elements.

disabling/enabling input type = image

liunx

Guest