if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Page 1 of 1

5 Replies - 1302 Views - Last Post: 24 June 2011 - 09:00 AM

#1 KazekageGaara  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 09-June 10

if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 05:38 AM

Here's the scenario:
I want two buttons: one for login and another for logout. Initially login button is enabled and logout button is disabled. When I click on login button, the logout button should get enabled and the login button should get disabled. And after that, when i click on logout, the login button should get enabled and the logout button should get disable.
Here's how far I could go with it,but it doesn't work, and that's where I need help!

<script type="text/javascript">
function disable_enable(){
if (document.test.b2.disabled==true)
document.test.b1.disabled=false
if (document.test.b1.disabled==true)
document.test.b1.disabled=true
}
}
</script>

<body>
<form name="test" >
<input type="button" id="login" value="login" name="b1" disabled=false>
<input type="button" id="logout" value="logout" name="b2" disabled=true>
</form>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

#2 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 06:19 AM

You've got a bunch of problems there.

You have an extra }.
Your function's logic is wrong if you're looking to toggle back and forth.
I don't see how you actually invoke the disable_enable() function. There no event handler on those buttons.
If FF, IE, and Chrome, having disabled="anything" disabled the button. So, the HTML as written above fires up with both buttons disabled.

Here's a working example:
<script type="text/javascript">
function disable_enable(el){
	el.disabled = true;
	if(el.value == 'login')
		document.test.logout.disabled = false;
	else
		document.test.login.disabled = false;
}
</script>

<body>
<form name="test" >
<input type="button" id="login" value="login" name="b1" onclick='disable_enable(this)'>
<input type="button" id="logout" value="logout" name="b2" disabled  onclick='disable_enable(this)'>
</form>
</body>
</html>

This post has been edited by satis: 24 June 2011 - 06:19 AM

Was This Post Helpful? 1
  • +
  • -

#3 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 06:20 AM

I have done few modification in your code....
Can you try below code for once.It is working good in IE and FF on my side

<html>
<head>
<script type="text/javascript">
function disable_enable(_this)
{
    if (_this == 'login')
    {
        document.test.login.disabled=true;
	    document.test.logout.disabled=false;
    }
    else
    {
        document.test.login.disabled=false;
    	document.test.logout.disabled=true;
    }
}

</script>
</head>
<body>
<form name="test" >
<input type="button" id="login" value="login" name="b1" onclick="disable_enable('login');" >
<input type="button" id="logout" value="logout" name="b2" onclick="disable_enable('logout');">
</form>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#4 KazekageGaara  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 09-June 10

Re: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 07:56 AM

thanks a lot...I appreciate it :)
Was This Post Helpful? 0
  • +
  • -

#5 KazekageGaara  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 09-June 10

Re: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 08:38 AM

another small help if u may :)
three buttons are there..i click on 1,2 gets enabled...i click on 2,3 gets enabled...so far so good...now when i click on 3,i want 2 and 3 to get disabled...

this doesn't work:
<script type="text/javascript">
function disable_enable(el){
if(el.value == 'abc')
     document.test.def.disabled = false;
if(el.value == 'def')
     document.test.ghi.disabled = false;
if(e1.value == 'ghi'){
     document.test.def.disabled = true;
     document.test.ghi.disabled = true;
}
}
</script>
	 
<body>
<form name="test" >
<input type="button" id="abc" value="abc" name="b1" onclick='disable_enable(this)'>
<input type="button" id="def" value="def" name="b2" disabled  onclick='disable_enable(this)'>
<input type="button" id="ghi" value="ghi" name="b3" disabled  onclick='disable_enable(this)'>
</form>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#6 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: if LOGIN button is clicked,LOGOUT gets enabled,and LOGIN gets disabled

Posted 24 June 2011 - 09:00 AM

Hi KazekageGaara,

Your approach is almost correct but you are doing small mistakes.Like in third condition of javascript function you are using e1 instead of el and you disabling the button3 on click of button3.I have done the correction.Please try this it is working good on all browsers.
<html>
<head>
<script type="text/javascript">
function disable_enable(el){
if(el.value == 'abc')
     document.test.def.disabled = false;
if(el.value == 'def')
     document.test.ghi.disabled = false;
if(el.value == 'ghi'){               / use el instead of e1  */
     document.test.def.disabled = true;
     document.test.abc.disabled = true;    /* use  abc instead of ghi  */
} 
}
</script>
</head>
<body>
<form name="test" >
<input type="button" id="abc" value="abc" name="b1" onclick='disable_enable(this)'>
<input type="button" id="def" value="def" name="b2" disabled  onclick='disable_enable(this)'>
<input type="button" id="ghi" value="ghi" name="b3" disabled  onclick='disable_enable(this)'>
</form>
</body>
</html> 
</html>


Thanks

Arvind thakur
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1