Блог

В следующем коде: https://jsfiddle.net/4gfqnyas / существует чистая функция Java script, которая перемещает div <div id="btn"></div> влево или вправо (а также изменяет формы) при нажатии кнопки входа или регистрации.

Как мне сделать так, чтобы div оставался в том же положении, в каком я его оставил, после каждой перезагрузки (или после нажатия кнопки регистрации отправки). Я не хочу, чтобы div возвращался в положение входа после перезагрузки (или после нажатия кнопки регистрации отправки).

Например: допустим, я нажимаю на Register, div переместится в register, и форма также изменится на register. Теперь, когда я нажимаю кнопку отправки регистрации, div автоматически переходит к логину, а также к форме, что делает невозможным отображение каких-либо ошибок в форме регистрации, если пользователь ввел неверную информацию. Я хочу, чтобы он оставался в той же форме после перезагрузки или после нажатия соответствующих кнопок отправки.

Чтобы исправить это, вы можете использовать localStorage .

Обратите внимание, что некоторые супер старые браузеры не поддерживают localStorage , но это не так уж и важно, их почти ни у кого нет.

Дайте мне знать, если это сработает. 🙂

Вот исправленная версия (CSS остается прежним) :

HTML :

 <div class="hero">
    <div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
                <button type="button" id="loginButton" class="toggle-btn" onclick="login()">Login</button> 
                <button type="button" id="registerButton" class="toggle-btn" onclick="register()">Register</button>
        </div>
        <div class="social-icons">
            <img src="images/fb.png">
            <img src="images/gp.png">
            <img src="images/tw.png">
        </div>
        
        <form method="POST" action="val_log.php" id="login" class="input-group">
            <input name="Lname" type="text" class="input-field" placeholder="User ID" minlength="4" maxlength="15">
            <input name="Lpassword" type="password" class="input-field" placeholder="Enter Password" minlength="5" maxlength="60">
            <input name="Lrempass" type="checkbox" class="check-box"><span> Remember Password</span>
            <button name="Lsubmit" type="submit" class="submit-btn"> Login </button> 
        </form>
        <form method="POST" action="val_reg.php" id="register" class="input-group">
            <input name="Rmail" type="email" class="input-field" placeholder="Email ID" >
            <input name="Rname" type="text" class="input-field" placeholder="User ID" minlength="4" maxlength="15">
            <input name="Rpassword" type="password" class="input-field" placeholder="Enter Password" minlength="5" maxlength="60">
            <input name="REpassword" type="password" class="input-field" placeholder="Re-Enter Password" maxlength="60">
            <input name="Rterms" value="selected" type="checkbox" class="check-box" ><span> I agree to the terms amp; conditions</span>
            <button name="Rsubmit" type="submit" class="submit-btn" > Register  </button>
        </form>
    </div>        
</div>
 

JS :

 var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");

console.log(x)
    
function register(){
    x.style.left = "-400px";
    y.style.left = "50px";
    z.style.left = "110px";
}
function login(){
    x.style.left = "50px";
    y.style.left = "450px";
    z.style.left = "0";
}


// Added code


if(localStorage){

    if(localStorage.getItem('rememberButtonChoice')){

        let getChoice = localStorage.getItem('rememberButtonChoice');

        if(getChoice == "loginChoice"){

        login();

    }

    else{

        register();

        }

    }

}



let loginButton = document.getElementById('loginButton');

let registerButton = document.getElementById('registerButton');



loginButton.addEventListener('click', function(){

    if(localStorage){

        localStorage.setItem("rememberButtonChoice", 'loginChoice');

    }

});


registerButton.addEventListener('click', function(){

    if(localStorage){

        localStorage.setItem("rememberButtonChoice", 'registerChoice');

    }

});
 

Когда ваша страница перезагружается, она теряет все данные и устанавливает для себя значение инициализации данных по умолчанию. Вы можете использовать localStorage для отслеживания того, что вы нажали. Что-то похожее на приведенный ниже пример.

И вы сказали, что хотите отобразить ошибку при перезагрузке страницы, поэтому в первую очередь, почему вы хотите перезагрузить. Вы также можете показывать их без перезагрузки страницы, а если вы используете отправку формы на стороне сервера, вы можете использовать параметры запроса url для ведения истории кликов.

 var x = document.getElementById("login");
    var y = document.getElementById("register");
    var z = document.getElementById("btn");
        
    function register(){
        x.style.left = "-400px";
        y.style.left = "50px";
        z.style.left = "110px";
        window.localStorage.setItem("cur_page", "register");
    }
    function login(){
        x.style.left = "50px";
        y.style.left = "450px";
        z.style.left = "0";
        window.localStorage.setItem("cur_page", "login");
    }
    
    const cur_page = window.localStorage.getItem("cur_page");
    
    switch (cur_page) {
      case "login":
        login();
        break;
      case "register":
        register();
        break;
      default:
        login();
    }