We Keep Coding

Submit button taking me to link that states HTTP ERROR 405. How do I prevent this, so i can allow it to work the way it is intended to?

I'm still learning, so if there's any help, or the answer is really trivial like something I need to put before hand, an explanation of the reason why this is happening would be greatly appreciated!
This has been a problem ever since I have started using it for weekend projects. Whenever I make a button, for example one that I have been trying to use is
<button type="submit" id="btn" onclick="validate()">login</button>
However, when I click on the button, instead of showing me what its supposed to show, it just states this on a gray page.
This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 405
HTML
<div class="wrapper">
<form class="box" method="post">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type="submit" id="btn" onclick="validate()">login</button>
</form>
</div>
JS
//I do understand that this is not a good way of setting up a username and password ,since anyone can easily get it. Ive been just doing this as a weekend project, i just want it to show an alert if it works or not
function validate(){
let username = document.getElementById('username');
value;
let password=document.getElementById('password');
value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}
I have tried to see if it was a problem with my js, but nothing seems to change, so that is why im starting to suspect that it its the button thats causin the problem

Firstly its not
document.getElementById('password');
value;
its
document.getElementById('password').value;
Secondly, there is no action property present I'll suggest removing the entire form tags
<div class="wrapper">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type=" submit" id="btn" onclick="validate()">login</button>
</div>
<script>
function validate() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (username == 'please' && password == 'work') {
alert('finally');
} else {
alert("NOOOO")
}
}
</script>

on your for, you are using attibute method="post" which has alternative of method="get" which being sent using URLs you are using method="post" which has a missing attribute action="/action_page.php" that will process you're page.
Like this
<form class="box" action="/action_page.php" method="post">
since you don't have action attribute, and has method="post", the post is being sent to the same page you are sending and without receiving it properly like in php.
$username = $_POST['username'];
If you still want to continue using javascript at test it, remove at post method, and remove the type="submit" on your button as it behaves on submitting if you just want to test using javascript.
Here is your final script.
HTML
<form class="box">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button id="btn" onclick="validate()">login</button>
</form>
</div>
JS
function validate(){
let username = document.getElementById('username').value;
let password=document.getElementById('password').value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}

How to have my input value appear in all my html pages?

I am storing the username and password in an array(datas),,then after registering and logging in, I am only able to have the username appear in the login page.. How can i make the username appear in all of my html pages?Like storing it in a session variable so i could have the username in all of my other pages. Thank you!
<script>
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(e) {
e.preventDefault();
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
var found_user = datas.find(d => d.username === username && d.password === password);
if (found_user) {
document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
}
}
document.getElementById("login_button").addEventListener("click", isUserValid);
</script>
<body>
<div class="loguser">
User
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" id="login_button" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>

You can use your browser's localstorage to store the values and retrieve them on other pages. Another option would be to use cookies, but I believe this would be a little more complicated.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Here's the documentation that talks a little more about. I think this will help you =)
An important point is that this will be saved in the user's browser, if you need this data, I recommend using a database

Use localStorage, is really simple. To set the value use this:
window.localStorage.setItem('actualUserName', document.getElementById('lusername').value);
And to retrieve the value use this:
window.localStorage.getItem('actualUserName');
More info: https://developer.mozilla.org/es/docs/Web/API/Window/localStorage

Trying to submit html form data via xmlhttprequest

I am trying to put together a simple login prompt for a bit of in house testing and I have found myself stuck. I have the login prompt made via HTML and am trying to send it off via xmlhttprequest. Here is my JS code:
var xhr = new XMLHttpRequest();
function loginResults() {
var loginUser = document.getElementById("username").value;
var loginPass = document.getElementById("password").value;
//console.log(loginUser + loginPass);
xhr.open("post", "https://test.com/api/login/");
var loginData = "username=" + loginUser + "&password=" + loginPass
xhr.send(loginData);
//console.log(loginData);
xhr.addEventListener("readystatechange", processRequest, false);
}
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
}
The issue is that the xhr.send completely fails using this method. However if I replace the variables sent with the plain text then everything works fine. Like this:
var loginData = "username=" + "test#test.com" + "&password=" + "test1234"
What is the difference between pulling the info via the form data and having the login hard coded like that? The request payload is exactly the same in both instances.
EDIT
Here is the gist of my HTML form:
<form name="isLogin" id="isLogin" onSubmit="loginResults()" method="post">
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" id="username" placeholder="Enter Email" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="password" required>
<button id="submitLogin" type="submit">Login</button>

The reason the request gets cancelled is you aren't intercepting the standard form submission. When you click the Login button, Chrome fires off the AJAX request, then also submits the form. Since this leads to a page load, Chrome cancels the AJAX request.
What you need to do is prevent the default event handling. A clean way to do this is to add the submission handling in your script:
document.getElementById("isLogin").onsubmit = function(e) {
e.preventDefault();
// AJAX here
console.log("form submission intercepted");
};
<form name="isLogin" id="isLogin" method="post">
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" id="username" value="test#test.com" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" id="password" value="test1234" name="password" required>
<button id="submitLogin" type="submit">Login</button>
</div>
</form>

You need to escape values before concatenating them to the URL querystring:
var loginUser = encodeURIComponent(document.getElementById("username").value);
var loginPass = encodeURIComponent(document.getElementById("password").value);
Secondly, i wouldn't recommend passing password directly through querystring.
The secure way to pass it is preferably salted-and-hashed.

Force window relocation through a form - JavaScript

I am building a fake login form which should load locally a different url if the user inserts the correct credentials. This is the html code:
<div class="container">
<h2>Login page - Welcome</h2>
<form id="loginForm" onsubmit="subLogin()">
Username: <input id="userName" type="text" name="userName" required><br/>
Password: <input id="passWord" type="password" name="password" required><br/>
<button type="submit" id="login-button" value="Login">Login</button>
</form>
</div>
And this is the javascript where I try to relocate the user via window.location.href = "/index.html".
function subLogin() {
var userName = document.getElementById('userName').value;
var passWord = document.getElementById('passWord').value;
if (userName !== 'mickeymouse' || passWord !== 'DisneyLand') {
alert('Your username or password is not correct');
} else {
window.location.href = 'http://localhost:8000/index.html';
};
};
If the username or password are wrong, but if they are correct the window.location does not work as espected.
Is there a way to solve this issue with pure javascript, or is it better to use anyway a XMLHttp GET Request via ajax? Thanks in advance for your replies!

I managed to solve the issue. I have simply changed the form to:
<form id="loginForm" action="javascript:subLogin()"></form>
I post the code in case that someone may need it in the future. Thanks anyway for your replies!

JQuery Mobile Empty Input Value

I'm currently creating a mobile website. I'm using jquery mobile.
I've already implemented the login and I'm now working on the registration.
On the login page i've got a simple . On the registration I am then logging the inputs, but it seems that the fields "username" and "password" are empty, even though i've entered some text. This problem doesn't occur after refreshing the page or if I load the page directly from the address bar.
Pageinit is being triggered.
I've deleted the cache but the problem is still there. Does anyone know why this is happening?
Here my code:
<!-- PAGE LOGIN -->
<div data-role="page" id="pageregistration">
<div data-role="content">
<input name="username" id="username" type="text" size="45" maxlength="45" placeholder="Username">
<input name="email" id="email" type="text" size="45" maxlength="45" placeholder="Email">
<input name="password" id="password" type="password" size="45" maxlength="45" placeholder="Password">
<input name="passwordConfirm" id="passwordConfirm" type="password" size="45" maxlength="45" placeholder="Confirm Password">
<button id="register">Create Account</button>
</div>
<script>
$('#pageregistration').on('pageinit', function()
{
$("#register").click(function(e)
{
e.preventDefault();
var username = document.getElementById('username').value;;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var passwordConfirm = document.getElementById('passwordConfirm').value;
console.log("Username: " + username + ", email: " + email + ", password: " + password + " - " + passwordConfirm);
});
});
</script>
</div>

Try with this because pageinit is triggered on the page being initialized, after initialization occurs.
Means you are getting to the registration page from somewhere (Other page)
$(document).on("pageinit", "#pageregistration", function(event) {
// rest of the code
});

The problem was found thanks to Omar. I changed the IDs and everything worked as desired.