Compare value of string to input from user

Question

Can you tell me how I can make a user enter their data on a form (email and password) and when they choose to register ("Registar"), the data is stored on variables that can be used right after if the user decides to click "Entrar", so they can Enter without using the default info.

This is a work for school, and I cannot use databases, just Javascript and JQuery.

This is what I got so far (it's a partial copy of the website I am making).

BTW: the id on the button is used for CSS and extra stuff that isn't there is also for styling the page.

<script type="text/javascript">
        var newuser;
        var newpassword;

        function registoTXT() {
            newuser = document.getElementById('inputUser').value;
            newpassword = document.getElementById('inputPassword').value;
            alert("Utilizador Registado!");
        }

        function check(form) {
            if ((form.usermail.value == "sparedes@isec.pt" && form.password.value == "12345678") || (form.username.value == newuser.value && form.password.value == newpassword.value)) {
                window.open('VIPZone.html', "_self")
            } else {
                alert("E-mail ou Password Inválido(s)!")
            }
        }
    </script>

<div class="contents">
        <h2>Login</h2>
        <blockquote>
            <form name="login">
                <div class="divTableBody">
                    <div class="divTable">
                        <div class="conteudoLogin">
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <label><b>E-mail</b></label>
                                </div>
                                <div class="divTableCell">
                                    <input id="inputUser" type="email" name="usermail" placeholder="Endereço@email.com" required>
                                </div>
                            </div>
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <label><b>Password</b></label>
                                </div>
                                <div class="divTableCell">
                                    <input id="inputPassword" type="password" name="password" placeholder="Password" required>
                                </div>
                            </div>
                            <br>
                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <button id="botaologin" onclick="check(this.form)" type="button">Entrar</button> &nbsp;
                                    <button id="botaologin" onclick="registoTXT()" type="button">Registar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </blockquote>
    </div>

Answer 1

There are a few things going on here.

First, don't use ID more than once. If an element is repeated and you want to style it use a class. There's nothing to stop you using an id to identify it as well, if you like. Always liked this explanation of CSS Star Wars CSS Specificity

For example:

<p class="my-class" id="my-id">Only one ID!</p>

Second, don't use onclick unless for some strange reason you must. You can attach event listeners to elements with vanilla js or with jQuery

Vanilla:

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('botaologin').addEventListener('click',function(){
        // do stuff here
    });
});

jQuery

$(document).ready(function(){
    $('#botaologin').click(function(){
        // do stuff here
    });
});

Third, apologies for addressing your actual question third.

You have a few options here.

1. You can store as a global
2. You can store in local scope
3. You can store in localstorage
4. You can store in a cookie

1) This is kind of bad practice, and you should probably wrap this kind of stuff in an object, but here is the the quick and dirty version

            var myGlobal = null;

            document.addEventListener('DOMContentLoaded', function(){

                document.getElementById('set-global').addEventListener('click', function(){
                    myGlobal = "I'm a global!";
                    alert(myGlobal);
                });
            });

2) Almost the same, but the variable isn't available outside the function

            document.addEventListener('DOMContentLoaded', function(){

                document.getElementById('set-global').addEventListener('click', function(){
                    var myLocal = "I'm a local!";
                    alert(myLocal);
                });
            });

3) Is useful if you need the data to persist, but don't abuse this - it isn't a replacement for a database.

Set storage item

localStorage.setItem("nameyourdata", "yourdata");

Get storage item

localStorage.getItem("nameyourdata");

4) Very similar to localstorage, except with a few different options. You can set when it expires and whether it is only available over https etc Set and Get Cookie

For both 3 and 4, if you have an object to store, use JSON.stringify(data) to store and JSON.parse(data) when respectively setting and retrieving.

Answer 2

You can do it with local/global variable,javascript cookies or local storage. I just use the last one, So finally your js will look something like this.

  var newuser;
  var newpassword;

  function registoTXT() {
            newuser = document.getElementById('inputUser').value;
            newpassword = document.getElementById('inputPassword').value;
            localStorage.setItem('usermail', newuser);
            localStorage.setItem('userpassword',newpassword);
          alert("Utilizador Registado!");
        }

 function check(form) {
            var userName = localStorage.getItem("usermail");
            var passWord = localStorage.getItem("userpassword");
            console.log(userName,passWord,form.usermail.value,form.password.value)
            if ((form.usermail.value === userName && form.password.value === passWord) || (form.username.value === newuser.value && form.password.value === newpassword.value)) {
                alert("Open new window goes here");

            } else {
                alert("E-mail ou Password Inválido(s)!")
            }
        }

Answer 3

There are multiple issues in your shared snippet:

1. botaologin id is used for multiple DOM elements.
2. The if condition in check(form) has multiple issues. Here is a fixed version:

   if ((form.elements.usermail.value === "sparedes@isec.pt" && form.elements.password.value === "12345678") || (form.elements.usermail.value === newuser && form.elements.password.value === newpassword))