Submit form and switch to the next page-CodePudding

I need to go to the next page(account.html) and post input value into localStorage when I submit form. Can't do form action="account.html" because i need to compare data.json and input.value. If they are equal - go to the account.html

html code

<form action="" method=""  name="form">
            <label  for="login">Логин</label>
            <input  id="login" type="text" placeholder="Логин" required maxlength="25">

            <label  for="password">Пароль</label>
            <input  type="password" id="password" placeholder="Введите пароль" required maxlength="25">

            <div >
                   
                    <input type="submit" id="button" value="Сохранить изменения" >    

            </div>
        </form>

When i try this code input.value posts to the localStorage but window.location.href = 'account.html' doesn't work

var requestURL = 'data.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function () {
    var users = request.response;
}

var form = document.querySelector('.modal__form')
let login = document.querySelector('.modal__form__input-login')
let password = document.querySelector('.modal__form__input-password')

    form.addEventListener('submit', () => {
        localStorage.login = login.value
        localStorage.password = password.value
        window.location.href = 'account.html'
    })

Also tried this code and it works but i don't need window.alert('alert')

form.addEventListener('submit', () => {
        window.location.href = 'account.html'
        window.alert('alert')
        localStorage.password = password.value 
        localStorage.login = login.value
        
    })

CodePudding user response：

 //First of all you need to use the setItem(), //this method allows you to store values in the //localStorage object.
//It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.
//Also note that localStorage can only store strings.
                        
//In your case we need to store an object and hence convert it to string before pushing it to setItem() since you have more than one key value pairs.
                        
          // From your Codes.
                        var requestURL = 'data.json';
                        var request = new XMLHttpRequest();
                        request.open('GET', requestURL);
                        request.responseType = 'json';
                        request.send();
                        request.onload = function () {
                            var users = request.response;
                        }
                    
                        
                        var form = document.querySelector('.modal__form')
                        let login = document.querySelector('.modal__form__input-login')
                        let password = document.querySelector('.modal__form__input-password')
                        
                //add this object to save to localStorage
                        const loginDetails = {
                            login: login.value,
                            password: password.value,
                        }
                        
                        
               //form submit       
     form.addEventListener('submit', () => {
                        
     //store the object to localStorage 
                        window.localStorage.setItem('user',JSON.stringify(loginDetails))
                        
              //now before you go to the next page u need to compare the response value from data.json to the values u stored in localStorage.
             // we need to access the values from localStorage
    //here JSON.parse converts the Json string back to object
     let user=JSON.parse(window.localStorage.getItem('user'))
         //we take the var users from your data.json response for comparison with user from localStorage. i assume both objects have the same key value pairs
        if(user.login == users.login && user.password == users.password){
         window.location.href = 'url'
          //and if its only redirecting a page i prefer to use
          // similar behavior as an HTTP redirect
         window.location.replace("url");
          //just make sure the url that you provide is valid and Voala!!!
           }
                        
           })

CodePudding user response：

The code below should help you save the user input (login and password values) into local storage before moving to the next page. If you need to access the information from localStorage, use localStorage.getItem(); to do so. Once the code below has been applied, if you look inside your localStorage in your browser, you will see the userInfo object with the keys login, password and their values there

var form = document.querySelector('.modal__form')
let login = document.querySelector('.modal__form__input-login')
let password = document.querySelector('.modal__form__input-password')

//We save our user Information in an object.
//Doing this makes it easy to create unique users with their own password and login
//The below gives a rough idea of how to do so.
//let userInfo ={
//[login: "John", password: "test"],
//[login: "John2", password: "test2"]
//}

 

    form.addEventListener('submit', () => {
  let userInfo ={
     login: login.value,
     password: password.value
}
       // Put the object into storage
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        window.location.href = 'account.html'
    })