Jump to content
Gilbert

Keep a form open to enter data

Recommended Posts

I hope there is a simple solution to this.  I want to use localStorage to remember a user, but if it's not there I want to open a form so the user can enter the info in the input box and press Submit.  Then I would put that info into the localStorage for next time.   I can get the form to open and display fine, but the code just continues to execute after I open the form ( display set to "block").   How can I get the code to stop and wait for the input to come in before continuing with the next line of code?  I have looked at the <dialog> tag with '.showmodal' which would work I guess, but it says it is not supported in Internet Explorer or FireFox;  I want it to work in all browsers.  I have tried a while loop to wait until the 'submit' button is pushed, but the whole thing bombs out when I put it in and the modal form doesn't even show.   If I assign a value to the input , and insert the line "userID = document.getElementById("enterUserID").value;"  just b/4 the return statement, I get the value I assigned.   I appreciate any help explaining it to me.... I have included my code if it helps.

<!DOCTYPE html>
<html>
<head>
    <title>Schenectady Kettles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  <link  -->  
    <style>
        #logInModal {display:none;z-index:3;width:80%;height:200px;margin:auto;
                    color:purple;background-color:lemonchiffon;text-align:center;
                    font-size:8vw;font-weight:bold;}
    </style>
</head>
<body>
    <h3>Testing for Log In</h3>
    <div>
        <button id="logInBtn" type="button" onclick="logInClicked()">Log In</button><br>
    </div>
    
    <!--   Log In Modal   -->
    <div id="logInModal">
        <div>
            Enter User ID<br>
            <input type="text" id="enterUserID" placeholder="User ID" autofocus>  <!-- Check input !!  -->
            <button type="button" id="getIDBtn">Submit</button>
        </div>
    </div>

    <p id="demo"></p>

    <script>
        function logInClicked() {
            var uID = "hello";
            if (typeof(Storage) !== "undefined") {
    	        if (localStorage.userID) {
                    uID = localStorage.userID;
                } else {
                    uID = getUserID();
                    document.getElementById("demo").innerHTML = uID;
                }  
            }
        }

        function getUserID() {
            var userID = "123";
            document.getElementById("logInModal").style.display = "block";
            document.getElementById("getIDBtn").onclick = function() {userID = document.getElementById("enterUserID").value;};
            
            return userID;
        }

    </script>
</body>
</html>

 

Share this post


Link to post
Share on other sites

You need to use event handlers.  You can use a key event on the field itself, or a click event on the button or whatever, but that event handler should get the form data and set it in localstorage.

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

×