Enable/disable button using javascript

Question

I am trying to build a simple html app getting some basic customer information and storing the information in database. After capturing the information, when the customer logs in his profile, he can see 3 buttons.

button 1= print

button 2= delete

button 3= edit

Special requirement:

Unless button 1 is clicked,
Then button 2 and 3 should be disabled for the first time user logs in.

For the next subsequent logins

All buttons should be enabled.

So far I have done the below thing:

<html>
<head>
    <script>
        function enableButton() {
          document.getElementById("button2").disabled = false;
          document.getElementById("button3").disabled = false;
        } 
    </script>
</head>
<body>
    <input type="button" id="button1" value="print" onclick="enableButton()"  />
    <input type="button" id="button2" value="delete" disabled />
    <input type="button" id="button3" value="edit" disabled />
</body>
</html>

But this doesn't take care of the requirement described above. Any help would be appreciated

What does this do that it doesn't do, what's the log in issue? — TankorSmash, Apr 22 '16 at 18:06
you just need to set some cookies and make this part of the logic — But those new buttons though.., Apr 22 '16 at 18:06
I'm not seeing anything associated with "logins" in your code. Are you missing something? — Samuel Cook, Apr 22 '16 at 18:06
To-Do--> Apply the special requirement described for first time log in. — tourist, Apr 22 '16 at 18:07
There are a lot of ways you could do this, one possibility is storing a `LastLoginDate` on your user table and looking that up on page load - if it is not set then hide your buttons in javascript. — IrkenInvader, Apr 22 '16 at 18:09

score 1 · Answer 1 · answered Apr 22 '16 at 18:58

use HTML5 localStorage or Javascript cookie to fulfill the requirement as it is totally based on user login.

Steps you have to follow :

When user login first time create a fresh cookie or setItem in localstorage as new.
When user login second time set a cookie value or setItem in localstorage as old.

By doing this you can identify which one is new user and which one is older and do functionality according to that.

Roko C. Buljan · Answer 2 · 2016-04-22T18:16:54.263

Using localStorage might be a workaround since you did not described any use of a server-side session retrieval

var trueOnFirstVisit = window.localStorage.firstVisit || "true";   
$("#button2, #button3").prop("disabled", trueOnFirstVisit);
window.localStorage.firstVisit = "false";

So, if we have a localStorage value of "false" means the user already visited the page.

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
http://api.jquery.com/prop/

score 0 · Answer 3 · answered Apr 22 '16 at 18:14

Assuming you already have stored the information when the user logged in you can access this using $.cookie('varible_name'); if you used cookies.

You can also send a post request and using rpc $.post(...) and check if the user has logged in. If subsequent log ins means separate log in rather than persistent you can keep a counter on the login table in the database and update/fetch this as required.

Enable/disable button using javascript

3 Answers3