Jump to content

Keep a form open to enter data


Gilbert

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>

 

Link to comment
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
×
×
  • Create New...