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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...