0

So I am coding a site with HTML, CSS and JS and there is a form in the start which is supposed to ask for 2 things:- the user id and password. Like this:

Picture

After that, on clicking submit, there is a <div id="newform">new form here</div> which should open on the page if the user id and the password both exist in lists such as the following:

for (var i = 0; i < users.length; i++) {
  if (username === users[i]) {
    if ((password === pw[i])) {
      var finaluserid = username;
    } else {
      document.getElementById("verstatus").innerHTML = "The username is correct, but the password doesnt match!";
    }
  } else {
    document.getElementById("verstatus").innerHTML = "The username does not exist!";
    //Username doesnt exist
  }
}

And further js like this:

var users = ["QWERTY", "DVORAK"];
var pw = ["abc", "ABC"];
var notverstat = false;

if (notverstat) {
  document.getElementById("verified").innerHTML = "Please login first!";
}

However, on submit it refreshes the page without opening the new form. I have added the onclick function. Hoping I could get a way to solve this issue and open the second form properly. At the same time, I want the user id from the first form to be autofilled in the second form, but everytime it comes as the variable name instead of the string it is supposed to hold using the .value feature.

EDIT: Also, is there a way to encrypt the arrays/lists so that a user cannot access it from the console?

EDIT 2: The solution doesnt seem to work... Any help?

CoderPro1000
  • 47
  • 6
  • You need to prevent the default action of the form - see the 1st answer in the duplicate. – Ori Drori May 07 '21 at 06:01
  • Is there a simpler solution which doesn't involve the usage of jquery? i don;t want to get into complex things! – CoderPro1000 May 07 '21 at 06:03
  • You don't need to use jquery. The solution is to use `e.preventDefault();` in your submit event handler where `e` is the event object. – Ori Drori May 07 '21 at 06:05
  • Okay thanks! Could you help me with what I edited too? I want it to be a secure platform where users cannot access others forms – CoderPro1000 May 07 '21 at 06:19
  • @OriDrori what is the event object in my case? I tried using the function name but it doesnt seem to work... What should I replace for e in my code? – CoderPro1000 May 07 '21 at 06:45
  • In the `onSubmit` function. See this example - https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit#example – Ori Drori May 07 '21 at 06:49

0 Answers0