Create profile page using localStorage

Issue

Thanks for viewing my question. I have a program in where the user is asked to put information, basically a registration form. The inputs will be such as name, gmail, etc… This information should be displayed in an another page called profile page, in just a press of a submit button. But if an item is left blank, the word "required" should be displayed right beside of all items, and thus restarts the entire registration form. However, during the process, I noticed that there are no outputs, despite having localstorage.

Is there something wrong with it? Thanks.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>

<body>
    <div class = "container">
        <h1>Registration</h1>
        <form role = "form"  onsubmit="signUp(event);">
            <div class="form-group">
                <input type="text" name="name1" id="name1" placeholder="First Name" required>
            </div>
            <div class="form-group">
                <input type="text" name="name2" id="name2" placeholder="Last Name" required>
            </div>
            <div class="form-group">
                <input type="email" name="email" id="email" placeholder="Email Address" required>
            </div>
            <div class="form-group">
                <input type="password" name="pswrd" id="pswrd" placeholder="Password" required>
            </div>
            <div class="form-group">
                <button type="submit">Register</button>
                 
            </div>
        </form>
        <h2>Results</h2>
        <div id="results">
                
        </div>
    </div>
    <script type="text/javascript">     
        const signUp = e => {
             let forminfo = {
                fname: document.getElementById('name1').value,
                lname: document.getElementById('name2').value,
                email: document.getElementById('email').value,
                pwsrd: document.getElementById('pswrd').value 
            }
        localStorage.setItem('forminfo', JSON.stringify(forminfo));
        //console.log(localStorage.getItem('forminfo'));
        dispData();
        e.preventDefault(); 
        
        }
                
        function dispData (){
            if(localStorage.getItem('forminfo')){
            //console.log(JSON.parse(localStorage.getItem('forminfo')));
            let {fname, lname, email, pswrd} = JSON.parse(localStorage.getItem('forminfo'));
            var results = document.getElementById('results');
            results.innerHTML ='
                <table>
                    <tbody>
                        <tr>
                            <td>First Name</td>
                            <td>${name1}</td>
                        </tr>
                        <tr>
                            <td>Last Name</td>
                            <td>${name2}</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>${email}</td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td>${pswrd}</td>
                        </tr>
                    </tbody>
                </table>
            ';  
        }
        dispData();     

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

Solution

Ok, now i solved it for you here

let button = document.getElementById("signup");

button.addEventListener('click', () => {
  let forminfo = {
    fname: document.getElementById('name1').value,
    lname: document.getElementById('name2').value,
    email: document.getElementById('email').value,
    pswrd: document.getElementById('pswrd').value 
  };
  dispData(forminfo);
});
                    
function dispData(forminfo) {
  if(forminfo) {
    var results = document.getElementById('results');
    results.innerHTML = `<table
                          <tbody>
                            <tr>
                                <td>First Name</td>
                                <td>${forminfo.fname}</td>
                            </tr>
                            <tr>
                                <td>Last Name</td>
                                <td>${forminfo.lname}</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>${forminfo.email}</td>
                            </tr>
                            <tr>
                                <td>Password</td>
                                <td>${forminfo.pswrd}</td>
                            </tr>
                        </tbody>
                    </table>`;  
    }
}
 
        <div class = "container">
            <h1>Registration</h1>
            <div>
                <div class="form-group">
                    <input type="text" name="name1" value="test" id="name1" placeholder="First Name" required>
                </div>
                <div class="form-group">
                    <input type="text" name="name2" value="test" id="name2" placeholder="Last Name" required>
                </div>
                <div class="form-group">
                    <input type="email" value="test@test.de" name="email" id="email" placeholder="Email Address" required>
                </div>
                <div class="form-group">
                    <input type="password" value="test" name="pswrd" id="pswrd" placeholder="Password" required>
                </div>
                <div class="form-group">
                    <button type="submit" id="signup">Register</button>
                     
                </div>
            </div>
            <h2>Results</h2>
            <div id="results">
                    
            </div>
        </div>

Answered By – Agan

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.