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")
}
}

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.

Javascript form validation - PHP variable as VALUE - Invalid Input

I have an issue where I am validating form submission with javascript. The form is prefilled with results from the database as PHP values like this:
<form name="profiledit" action="profile_edited.php" method="POST" >
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname"
value="<?php echo $result['teamname'];?>">
</form>
This is the javascript:
<script type="text/javascript">
function empty() {
tn = document.getElementById("teamname").value;
if (! /^[a-zA-Z0-9]+$/.test(tn)) {
alert("Please enter a valid Team Name");
return false;
}
}
</script>
The submit button is :
onClick="return empty();"
The problem is that is always tells me top "Please enter a valid Team Name" unless I retype the text in the box (that was supplied by the PHP value).
I cannot see any weird spaces or things in "view source".
What could the problem be?
Thanks.
EDIT1 : Sorry I forgot to paste closing brace. It was there in the code and this does work for BLANK forms OK. Just not when it has a prefilled value from PHP.

Try this
Check this link
Html
<form name="profiledit" action="" method="POST" id="profiledit">
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname" value=""/>
<input type="button" id="submit" value="submit" name="submit" />
<input type="submit" id="submitform" value="submitform" name="submit" style="display:none;" />
</form>
Jquery
$('#submit').click(function(){
var pattern=/^[a-zA-Z0-9]*$/;
var tn = $("#teamname").val();
if(tn == "" && pattern.test(tn)){
alert('1');
}else {
//alert('2');
$('#submitform').trigger('click');
}
});
Hope its helps

Well, there was nothing wrong with the responses after all. My code was good and you guys code was good as well.
The problem?
Well I just happened to be testing with a teamname that had a SPACE in it!!!!!!!!!!
So having finally worked out that was the problem all along I would like to thank you all for your inputs.
I have used the regex instead : /^\w+( \w+)*$/
Allows words, numbers and a space.

How to make a certain pattern or algorithm when entering staff id in login form?

I am trying to make a login form with an input for Staff ID, Password, and submit. For say, software has a serial # that will only be accepted if it matches the pattern or format of the serial that is required for the software. How would I do that? I want it to have a thumbnail that will popup and tell you that is is not the proper format kind of like required does when you put in in the input tag. I want to also be able to possibly style the thumbnail as well, in order to make it match the UI of the site.
html form:
<section name="LoginSection" id="LoginSection" class="LoginSection">
<div name="LoginHeader" id="LoginHeader" class="LoginHeader">
<center><h3>Staff Login</h3></center>
</div>
<form name="LoginForm" id="LoginForm" class="LoginForm" action="">
<input type="text" placeholder="Staff Identification Number" name="StaffInput" id="StaffInput" class="StaffInput" required />
<input type="password" placeholder="Staff Login Password" name="StaffPass" id="StaffPass" class="StaffPass" required />
<center><input type="submit" value=" Submit " name="Submit" id="Submit" class="Submit" /></center>
</form>
</section>

try more on HTML5 thing:
<input type="tel" name="mobileno" pattern="[789][0-9]{9}" required title="Enter Mobileno in correct format"/>
Or if you want it using Javascript something like :
<script type="text/javascript">
function login()
{
if(document.loginFrm.mobileno.value.length==0 )
{
alert('Enter MobileNo please');
document.loginFrm.mobileno.focus()
}
//return false
}
</script>

i think you can get your imagination for combination some html css and php. or with bootstrap design ?
for example :
<?php
if(isset($_POST['submit'])){
if($_POST['name'] == NULL && $_POST['pass'] == NULL){
echo'<div class="login">
<span> It didn't work ! </span>
</div>';
}
}
hehe i always do that if i want to combine skill with css html and php :)
You can see my update answare with jquery :
$(document).ready(function(){
$('#button').click(function(){
if($('#txt-name').val() == '' && $('#txt-pwd').val() == ''){
alert('It didn't work');
}
});
});