onclick disabled button

s_avinash_s · October 31, 2018

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

dsonesuk · October 31, 2018

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?

s_avinash_s · October 31, 2018

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>

Funce · October 31, 2018

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.

JMRKER · October 31, 2018

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.

dsonesuk · November 1, 2018

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 November 1, 2018 by dsonesuk

JMRKER · November 1, 2018

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'

dsonesuk · November 1, 2018

https://www.w3schools.com/code/tryit.asp?filename=FWT595ZJ00W7

s_avinash_s · November 2, 2018

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.

dsonesuk · November 2, 2018

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

JMRKER · November 2, 2018

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?

s_avinash_s · November 4, 2018

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

JMRKER · November 4, 2018

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?

s_avinash_s · November 5, 2018

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.

dsonesuk · November 5, 2018

You just need to define the logged in users name and password to individual variables, then use those in the alert.

onclick disabled button

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in