s_avinash_s Posted October 31, 2018 Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 31, 2018 Share Posted 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? Link to comment Share on other sites More sharing options...
s_avinash_s Posted October 31, 2018 Author Share Posted 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> Link to comment Share on other sites More sharing options...
Funce Posted October 31, 2018 Share Posted 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. Link to comment Share on other sites More sharing options...
JMRKER Posted October 31, 2018 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 1, 2018 Share Posted November 1, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
JMRKER Posted November 1, 2018 Share Posted 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' Link to comment Share on other sites More sharing options...
dsonesuk Posted November 1, 2018 Share Posted November 1, 2018 https://www.w3schools.com/code/tryit.asp?filename=FWT595ZJ00W7 Link to comment Share on other sites More sharing options...
s_avinash_s Posted November 2, 2018 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 2, 2018 Share Posted 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? Link to comment Share on other sites More sharing options...
JMRKER Posted November 2, 2018 Share Posted 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? Link to comment Share on other sites More sharing options...
s_avinash_s Posted November 4, 2018 Author Share Posted 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 Link to comment Share on other sites More sharing options...
JMRKER Posted November 4, 2018 Share Posted 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? Link to comment Share on other sites More sharing options...
s_avinash_s Posted November 5, 2018 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2018 Share Posted November 5, 2018 You just need to define the logged in users name and password to individual variables, then use those in the alert. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now