function not pulling input data from local host

Question

I am creating a simple login an sign up form that is used to create a user and store it in the local host. I have got the sign up form working as it should, but when I try and pull the information from the localhost, it just refreshes the page. Im just wondering how I can get the function to work correctly.

Here is my JS:

const signup = (e) => {
    let user = {
      firstName: document.getElementById("firstName").value,
      lastname: document.getElementById("lastName").value,
      email: document.getElementById("email").value,
      username: document.getElementById("username").value,
      password: document.getElementById("password").value,
      confirm_password: document.getElementById("confirm_password").value,
    };
      localStorage.setItem("user", JSON.stringify(user));
      console.log(localStorage.getItem("user"));
      e.preventDefault();
      alert("Signup Successful")

  };

  function login() {
    var stored_username = localStorage.getItem('username');
    var stored_password = localStorage.getItem('password');
    var username1 = document.getElementById('username1');
    var password2 = document.getElementById('password2');

    if(username1.value == stored_username && password2.value == stored_password) {
      alert('Login Successful.');
  }else {
      alert('Username or password is incorrect.');
  }
}
document.getElementById("login-btn").addEventListener(type = click, login())

And here is my HTML:

 <div class="bodyBx">
        <section>
            <div class="container">
                <div class="user signinBx">
                    <div class="imgBx"><img src="https://images.unsplash.com/photo-1551034549-befb91b260e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
                    <div class="formBx">
                        <form>
                            <h2>Sign In</h2>
                            <input type="text" id="username2" placeholder="Username" />
                            <input type="password" id="password2" placeholder="Password" />
                            <button id = "login-btn" type="submit" onclick="login();">Submit</button>
                            <p class="signup">
                                Need an account ?
                                <a href="#section2" onclick="toggleForm();">Sign Up.</a>
                            </p>
                        </form>
                    </div>

                </div>
            </div>
        </section>

        <!-- ================= Sign Up Form Start ================= -->

        <section>
            <div class="container">
                <div class="user signupBx" id="section2">
                    <div class="imgBx"><img src="https://images.unsplash.com/photo-1555680206-9bc5064689db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
                    <div class="formBx">
                        <form role="form" onsubmit="signup(event)">
                            <h2>Sign Up</h2>
                            <input type="text" id="firstName" placeholder="First Name" />
                            <input type="text" id="lastName" placeholder="Last Name" />
                            <input type="email" id="email" placeholder="example@email.com..." />
                            <input type="text" id="username" placeholder="Username" />
                            <input type="password" id="password" placeholder="Password" />
                            <input type="password" id="confirm_password" placeholder="Confirm Password" />
                            <button type="submit">Submit</button>

                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

kiranvj · Answer 1 · 2020-10-27T03:12:38.953

Change the type of login button to button from submit, like below

<button id = "login-btn" type="button" onclick="login();">Submit</button>

If type=submit the form is posted to the url specified in the action attribute of the form, else to the same page if action is missing and you will see a page refresh.

Alternate method - You can also try return false; in your login()

Also your addEventListener should be like below, you don't have to provide type = click, the first param is of type string and second param is of type function. Check docs

document.getElementById("login-btn").addEventListener("click", login)

score 0 · Answer 2 · answered Oct 27 '20 at 02:13

Localstorage can only store text. So you store a stringified object, which is fine, but you're trying to retrieve properties from it which don't exist.

Instead of:

var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));

//then later
localStorage.getItem("someField");
//localstorage doesnt know what someField is

You want:

var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));

//then later
itm = JSON.parse(localStorage.getItem("itm"));
someField = itm.someField

As for the refresh, check this out: Stop form refreshing page on submit

TL;DR: Add e.preventDefault() in function login() (you'll have to change it to function login(e).

function not pulling input data from local host

2 Answers2