Javascript window.open works but window.location does not - javascript

I'm working on a simple login page. When the user types in the correct username and password it redirects them to another page. So far I have tried:
window.location, window.location.replace window.href and window.open the only one that works is window.open, however I'm trying to make is so it does not open a newtab, it just redirects them to another page.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="master.css">
<title>Day Four</title>
</head>
<body>
<h1>Log In</h1>
<form onsubmit="valid()">
<label for="username">Username:</label>
<input id = 'user-name' type="text" name="" value="" required>
<label for="password">Password:</label>
<input id = 'pass-word' type="password" name="" value="" required>
<input id = 'log-in'type="submit" name="" value="Log In">
</form>
</div>
</body>
<script src="mainJs.js" charset="utf-8"></script>
</html>
JS
function valid(){
var username = document.querySelector('#user-name').value;
var password = document.querySelector('#pass-word').value;
if(username === 'test' && password === '1'){
window.open("gradebook.html")
}else{
alert("Wrong username or password")
}
}
Edit: I know it's not secure. I put the code that works window.open("gradebook.html") seeing how the other ones don't do anything.
I also don't get any errors in the console when using the other ones.

It looks like the problem was with the form tags. If I remove the form tags everything starts working as it should.

All you need to do is set window.location to the new URL.
document.querySelector("button").addEventListener("click", function(){
window.location = "http://cnn.com";
});
<button>Click Me</button>

Related

open website if "password" is exactly what is needed (github pages)

Sorry if this is a relatively basic question but I'm getting a little bit frustrated, and this is the first time I'm using GitHub Pages
What I want is:
Accept text in form
Compare text in form with password "pass"
if correct, go to a different html site
else, do nothing
thanks in advance
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<form onSubmit="checkPass(this)">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
<script>
function checkPass(passForm) {
var password = document.getElementById('pwd');
if (password == "pass"){
windows.open("Website extension here")
}
}
</script>
</body>
</html>
But anyone can view source and open the website right? Everything is right except you missed .value. Add a return false and make windows as window:
function checkPass() {
var password = document.getElementById('pwd').value;
if (password == "pass") {
window.open("https://example.com")
}
}
<form onSubmit="checkPass(); return false;">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
The above code will not work in sandbox. So try it using CodeSandbox Demo.

Auto-fill specific login forms of a external webpage

I'm trying to pass credentials to fill automatically the inputs login of this website: https://www.pinterest.pt/login/ .
I don't know what are the variables. So I used the inspect of the browser to know what is the id of each input.
I'm using this code but it is not working:
function Test() {
var name = document.getElementById("id").value;
var password= document.getElementById("password").value;
document.forms["registerForm"].submit(); //form submission
}
<!DOCTYPE html>
<html>
<body>
<form id="registerForm" name="registerForm" method="post" target="_top" action="https://www.pinterest.pt/login/">
<input id="email" name="id" type="email" value="examplelogin" />
<input id="password" name="password" type="password" value="examplepassword" />
<input type="button" name="submit" id="btn" value="Submit" onclick="Test()" />
</form>
</body>
</html>
Do you know what I'm doing wrong?
Thank you for your help.
Not so much an answer to your question, but more of a future reference, you don't need to get all elements within a form via a selector. You can simply use the following technique:
function Test() {
let form = document.getElementById('registerForm');
var password = form.elements.password.value;
var email = form.elements.email.value;
form.submit();
}
Notice how accessing form.elements grants direct access to the element you're trying to read out.
I may just be nit-picking, but since this is a form submit, you probably need to use onsubmit and not just have the button click do something. Try this maybe?
<!DOCTYPE html>
<html>
<body>
<form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada" onsubmit="submitFunction()">
<input id="usuario" name="_58_login" type="text" value="examplelogin" />
<input id="password" name="_58_password" type="password" value="examplepassword" />
<button type="submit">Submit</button>
</form>
<script>
function Test() {
// your submit code
}
</script>
</body>
</html>
Forms can be very picky sometimes. Always best to use a working example for exactly what you're doing as a reference.

Windows.location.assign is not working in a js function

I'm training on developing a personal web site and I'm at its very beginning.
I need to load a new web page when clicking on a button after some verification on the information entered by the user in the forms' fields.
For that, I made a JavaScript script with an auth() function (which is an easy prototype not secure at all, by the way if you know a great tutorial to make a secure web site connection using a database, I'll be grateful if you shared your knowledge with me).
The problem is: When I click on the button nothing is happening, why ?
When I tried to put the function in the html file, it's not working too, but when I take the windows.location.assign(link) out of the function it's working but it's directly redirecting and it's not what I wanted.
Here is my code
<!DOCTYPE html><html>
<link rel="stylesheet" href="style.css">
<body>
<center>
<form>
User name : <br>
<input name="user" type="text" id="user"></br>
Password : <br>
<input name="password" type="password" id="pswd"></br>
<br>
<input name="Ok" type="submit" value="Ok" onclick="auth()"><br>
</form>
</center>
<script type="text/javascript" src="id.js"></script>
</body>
</html>
and my js
function auth(){
var user = document.getElementById("user");
var pswd = document.getElementById("pswd");
var link = 'http://192.168.1.17/index.html';
if(pswd == "osef"){
window.location.assign(link);
}
return false;
}
You have two issues in your code.
You are submitting the form when you click on the button
you are not getting the values of the input.
For the first issue, use event parameter in click function like onclick="auth(event)" and then in the auth function use
event.preventDefault() to prevent the form from submit.
For the second issue you need to get the values of the input like this document.getElementById("user").value.
HTML:
<center>
<form>
User name : <br>
<input name="user" type="text" id="user"></br>
Password : <br>
<input name="password" type="password" id="pswd"></br>
<br>
<input name="Ok" type="submit" value="Ok" onclick="auth(event)"><br>
</form>
</center>
JAVASCRIPT:
function auth(){
event.preventDefault();
var user = document.getElementById("user").value;
var pswd = document.getElementById("pswd").value;
var link = 'http://192.168.1.17/index.html';
if(pswd == "osef"){
window.location.assign(link);
}
return false;
}
Hope this will solve the problem

JavaScript Not Working with HTML and PHP

I'm trying to create a simple registration form with basic HTML and PHP to insert data to my database. Basically, I want to validate the fields first before inserting the data and so I have created an external JavaScript file. Problem is, it is displaying the actual JavaScript code on the next page as opposed to validating!
My HTML file:
<html>
<head>
<title>Register Page</title>
<body>
<form id="register" method="POST" action="register.js" onsubmit="return verify()" action="register.php">
Forename: <input type="text" name="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</head>
</html>
My JavaScript file:
<script type="text/javascript">
function verify(){
var forename = document.getElementById["forename"].value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
Instead of just validating I'm being redirected to a new webpage showing me the code I have written above.
I am completely new to web development and it would mean a lot if someone could help me out. All I want to do is just validate the fields before adding them to the database.
Two things you have to change
add id to your input control because you are fetching the value of text through Id
<input type="text" name="forename" id="forename">
syntax of getElementById()
var forename = document.getElementById("forename").value;
Once You do the validation for username and password. Submit the form
<script type="text/javascript">
function verify(){
var forename = document.getElementById("forename").value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
<form id="register" method="POST" onsubmit="return verify()" action="register.php">
Forename: <input type="text" id="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
I think you should recheck your syntax for document.getElementById["forename"]
It should be document.getElementById("forename")
You can try debugging step wise. For example, try console.log.
var forename = document.getElementById("forename").value;
console.log(forename);
Try Chrome/Firebox Inspect element > Console and see if anything is been printed.
Hope this helps.
Peace! xD
You shouldn't be declaring register.js as the action for your <form>. The action attribute of a <form> element tells the browser where to send (POST or GET) the form data to, which is why you're being taken to register.js in your browser.
You need to intercept the browser submitting the form, do your validation, and then send the data on to your PHP file (register.php). It might be worth reading some tutorials on javascript form validation, such as this TutorialsPoint one.
What you can be able to do is to take your hole script into a echo in php, then create a php validation for the js and check if js got successfully done then execute script if so.
if you want your javascript on same html page then put this type
<html>
<head>
<title>Register Page</title>
<script type="text/javascript">
function verify(){
var forename = document.getElementById["forename"].value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
</head>
<body>
<form id="register" method="POST" action="" onsubmit="return verify()" action="register.php">
Forename: <input type="text" name="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</html>

If statement re-direct not working as expected

I'm trying to learn javascript through dummy scenarios, the below will not be used in a live context. All of the html pages are on my home server which is why i havent used http:// etc in the link.
I'm trying to have the below code take me to the "index" page if I type in the correct username and password and remain on the "home" page if I type it incorrectly but with an alert stating "Invalid Login". If I type in the correct username and password i'm redirected correctly however I'm also redirected to the index page if I enter in an incorrect username/password after the alert is correctly triggered.
How can I stop the index page loading for the wrong username/password? I'm sure its probably something simple i'm missing!
This is the html of the homepage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div id="loginbox">
<form id="login" action="home.html">
Username: <input type="text" name="user" id="user"><br>
Password: <input type="password" name="password" id="password"><br>
<input type="submit" value="Login" onclick="checkUserName()">
</form>
</div>
</div>
and this is the script
function checkUserName() {
var User = document.getElementById("user").value;
var Password = document.getElementById("password").value;
if (User === "user123" && Password === "password123") {
window.location = "index.html";
}
else {
alert("Invalid Login");
}
}
Cheers!
You dont want to submit the form in this case. You just need to invoke the js function on click of login. So use a normal button instead a submit.
<button onclick="checkUserName()">login</button>
When you use a submit button, the form will get submitted unless you are not preventing the default action by e.preventDefault() or by returning false from the js function being called
function checkUserName() {
var User = document.getElementById("user").value;
var Password = document.getElementById("password").value;
if (User === "user123" && Password === "password123") {
window.location = "index.html";
}
else {
alert("Invalid Login");
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div id="loginbox">
<form id="login" action="home.html">
Username: <input type="text" name="user" id="user"><br>
Password: <input type="password" name="password" id="password"><br>
<button onclick="checkUserName()">login</button>
</form>
</div>
</div>

Categories