Jump to content
s_avinash_s

onclick disabled button

Recommended Posts

Hi

Is it possible to do onclick event on disabled button?

I have a disabled button , when ever i click on it, i need to get alerts.

Is it possible to do with java script in html

 

Share this post


Link to post
Share on other sites

Depends on what type the button is! Depends if it submits on clicking! Depends if AJAX is involved! Depends if someone give us some code so we can figure what they are trying to achieve?

Share this post


Link to post
Share on other sites

Hi

I have created a sample project with user name and password.

As shown in attached image, three and four are disabled.

When i click on three or four buttons which are disabled, Is it possible to get alert with login and password.


<html>
<head>
<script>
function one()
{document.getElementById("fir")
alert("first button");
}

function two()
{document.getElementById("sec")
alert("second button");
}

function three()
{document.getElementById("thi")
alert("third button");
}

function four()
{document.getElementById("for")
alert("fourth  button");
}
function login()
{
var password=["1234", "5678"];
var username=["abcd","defg"];
var uid=document.getElementById("uname").value;
var pid=document.getElementById("pass").value;

if(password[0] == pid && username[0] == uid){

document.getElementById("fir").disabled = false;
document.getElementById("sec").disabled = false;
document.getElementById("thi").disabled = false;
document.getElementById("for").disabled = false;
}
else if(password[1] == pid && username[1] == uid) {
alert("Success");
document.getElementById("thi").disabled = true;
document.getElementById("for").disabled = true;
}
else
{
alert ("Enter valid username and password");
document.getElementById("fir").disabled = true;
document.getElementById("sec").disabled = true;
document.getElementById("thi").disabled = true;
document.getElementById("for").disabled = true;
}
}
</script>
</head>
<body>

  <label for="uname"><b>Username</b></label>
    <input type="text" id="uname" placeholder="Enter Username" name="uname" required><br/><br/>
	
	<label for="psw" ><b>Password</b></label>
    <input type="password" placeholder="Enter Password" id="pass" name="psw" required><br/><br/>

    <button onclick="login()" id="log">Login</button><br/><br/><br/>
	
	<button onclick="one()" id="fir">one</button>
	<button onclick="two()" id="sec">two</button>
	<button onclick="three()"id="thi">three</button>
	<button onclick="four()" id="for">four</button>
	
</body>
</html>

 

Capture11.PNG

Share this post


Link to post
Share on other sites

Is it necessary for it to be actually disabled? Is there an aversion to just making it just appear disabled?

 

You could just apply a class, to change the styling, and as a condition for different logic is used when pressed. 

element.classList.contains("lookDisabled");

I don't want to get into the CSS of such an endeavour, but you should be able to figure it out easily enough.

Share this post


Link to post
Share on other sites

You could change the 'opacity' of the button to make it appear disabled.

If you actually disable the button, then it will not react to any other events, such as onclick.
You could modify the logic to use the functions 'addEventListener' and 'removeEventListener'
to change the event actions and avoid the 'disable' altogether.   For example, you could remove
the original event assignments with 'removeEventListener' and then reference a new function
to execute with 'addEventListener'.  If you need to go to another user/password then you could
reverse the assignments back to the original settings.

Share this post


Link to post
Share on other sites

Try placing buttons within a div, transfer all id and call of function to the now parent div container instead. using css give the buttons position: relative; z-index: -1;

target the button you wish make them disabled using .children[0]

document.getElementById("thi").children[0].disabled = true;

div element with id 'thi', children[0] will target first child element i.e the button and disable

Essentially the button outer div click will trigger the function in place of the button, and because its not affected by button being disable, it will continue to work. Giving the button z-index: -1; insures, the div function is triggered before the button press.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Following is stripped down code to show proof of concept.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> HTML5 page </title>
</head>
<body>
<!--
  <label for="uname"><b>Username</b></label>
  <input type="text" id="uname" placeholder="Enter Username" name="uname" required><br/><br/>
    
  <label for="psw" ><b>Password</b></label>
  <input type="password" placeholder="Enter Password" id="psw" name="psw" required><br/><br/>
-->
  <button onclick="login()" id="log">Login</button><br/><br/><br/>
    
  <button onclick="one()" id="fir">one</button>
  <button onclick="two()" id="sec">two</button>
  <button onclick="three()"id="thi">three</button>
  <button onclick="four()" id="for">four</button>
	<script>
function one() { alert("first button"); }
function two() { alert("second button"); }
function three() { alert("third button"); }
function four() { alert("fourth  button"); }
	function threeOFF() { alert("third button turned OFF"); }
function fourOFF() { alert("fourth  button turned OFF"); }
	function login() {
  document.getElementById('thi').onclick = threeOFF;
  document.getElementById('thi').style.opacity = 0.4;
  document.getElementById('for').onclick = fourOFF;
  document.getElementById('for').style.opacity = 0.4;
}
</script>
	</body>
</html>
	

You could reconnect by changing the 'onclick' event back to the function 'three' instead off 'threeOFF'

Share this post


Link to post
Share on other sites

Hi 

It was much helpful. thank you

When i click disabled third button , how to get again username and password with login option instead of "success" using alert.

 

Share this post


Link to post
Share on other sites

Clicking third button does not show 'success' it shows 'third button' alert, so I don't know what you are talking about?

Share this post


Link to post
Share on other sites
10 hours ago, s_avinash_s said:

Hi 

It was much helpful. thank you

When i click disabled third button , how to get again username and password with login option instead of "success" using alert.

 

To which piece of code are you referring?

That last requirement is totally new to the original post?

 

Share this post


Link to post
Share on other sites

Hi

Both the codes which were posted were helpful.

Now i get a alert saying "third button" etc.

So instead of that alert, i need to replace alert with login option as shown in figure.

Please suggest

 

 

login.PNG

Share this post


Link to post
Share on other sites

I'm a bit tired of guessing what it is that you want.  Your requirements are too vague for me.
Log-on display is always available so what do you mean by replacing alert with figure?

Share this post


Link to post
Share on other sites

Hi

12 hours ago, JMRKER said:

replacing alert with figure?

Not replacing alert with figure.

i need a alert with username , password and login option.

For example, if you check this example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_alert

it displays a alert with  "Hello! I am an alert box!".

Similarly i need a alert with username , password and login option.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×