我如何制作一个使用特定输入重定向到特定 html 页面的 js 代码？

Question

let me explain this better, i would like to know how it's possible to create a js code that checks if an html input is correct and in case it is it redirects you to another page, here is what i tried based on what i managed to find out.

html part:

<form name="access" onsubmit="return validate()">
  <input
    type="text"
    id="inputbox"
    value="Password"
    pattern="idkwhatishoouldwriteinhere"
  />
  <input type="submit" value="Submit" />
</form>

js part:

function validate() {
  if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
    alert("Wrong password");
    document.access.Password.focus();
    return false;
  } else {
    window.open("index.html");
  }
}

in case you are wondering why i put the "answer" in the patter is because this is supposed to be a little easter egg and i feel like looking directly at the js is meaningless becuase it contains the link you should be redirected to. enter code here

Answer 1

You need to give your input the name Password , otherwise document.access.Password is undefined.

 function validate() { if (document.access.Password.value != "idkwhatishoouldwriteinhere") { alert("Wrong password"); document.access.Password.focus(); return false; } else { window.open("index.html") } }

 <form name="access" onsubmit="return validate()"> <input type="text" id="inputbox" value="Password" name="Password" /> <input type="submit" value="Submit" /> </form> <!-- password is "idkwhatishoouldwriteinhere" -->

Answer 2

You want this.

You had some issues with the id of the field and name etc

I also changed your inline code to eventListener which is the recommended method

Password is fred

 window.addEventListener("load", function() { document.getElementById("access").addEventListener("submit", function(e) { const inputbox = document.getElementById("inputbox"); if (inputbox.value != "fred") { alert("Wrong password"); inputbox.focus(); e.preventDefault(); // cancel submit } else location.replace("index.html") }); })

 <form id="access"> <input type="password" id="inputbox" value="" placeholder="Password" /> <input type="submit" value="Submit" /> </form>

Answer 3

If you want to keep your code close to what you already have, I would adjust it like this. I would suggest storing your class names and ids as variables and then accessing them from the variable. Also there is no need to return false in your if. There are other good solutions on here but this one will keep your code pretty close. This will also ensure that you don't end up with a null value when accessing the value in your password field.

 const passwordField = document.getElementById('inputbox'); function validate() { if(passwordField.value != "idkwhatishoouldwriteinhere") { alert( "Wrong password" ); passwordField.focus() ; } else { window.open("index.html") } }

 <form name="access" onsubmit="validate()" href="javascript:void(0)"> <input type="text" id="inputbox" value="Password" /> <input type="submit" value="Submit" /> </form>