Question 42677 in Html Question posted in
Some basic documentation can be found here.

This page isn’t working…If the problem continues, contact the site owner. HTTP ERROR 405 – Html

I am making this simple login form using html css and js. And I am receiving this error when i click the login button: This page isn’t working…If the problem continues, contact the site owner. HTTP ERROR 405.
Below are the codes:

JAVASCRIPT:

function validate(){
  var username = document.getElementById(username).value
  var password = document.getElementById(password).value
  if(username == "judge1" && password=="1234") {
    alert("Login Successful");
    return false;
  }
  else{
    alert("Login Failed");
  }
}

HTML:

<form class="inputs" action="/" method="POST">
        <input type="text" class="username" placeholder="Username" id="username"> <br/>
        <input type="password" class="password" placeholder="Password" id="password"> <br/>
        <input type="submit" value="Login" onclick="validate()">
    </form>

I tried googling it but I’m having a hard time in finding the solution. I am still new in this so please help.

Tags:

4

Answers


  1. 0

    There is a little error in getting username and password to variables. you should give element ids in string types and use ‘;’ to end.

    var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

    however I think its better to call validate function using onsubmit event from the form

    then you can prevent redirecting to the action page by returning false from your validate();

    Login or Signup to reply.
  2. 0

    You are getting an error because while accessing the username and password in the javascript code you are doing one thing wrong which is :

    We must use quotes around id while accessing HTML Code in JS.

    And Also, while submitting the Form, you are not using event.preventDefault(). This is basically used to prevent the default behavior of an event here like in the form submission. If we are not using this then it will stop the form from submitting anything because some additional checks and validations are required before submission. But often we don’t want to apply that checks so its solution is using event.preventDefault().
    So this can be corrected as :

    function validate(event){
  event.preventDefault(); //  this will prevent form submission
  var username = document.getElementById("username").value; //  missing quotes around id
  var password = document.getElementById("password").value; //  missing quotes around id
  if(username == "judge1" && password=="1234") {
    alert("Login Successful");
  }
  else{
    alert("Login Failed");
  }
}
    Login or Signup to reply.
  3. 0

    I can already spot some issues with your code:

    • When using type="submit" the browser will send the form and it wont care much about any functions being executed, so adding onclick is pointless since you are leaving the page anyway, So remove type="submit" or add onsubmit="return false;" to the form tag.

    • On the JS side, you should add double-quotes when passing the ID name to getElementById

    var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
    Login or Signup to reply.
  4. 0

    There are SEVERAL errors. I will explain them one by one

    1. You are always submitting the form, it is POSTed to the root, which likely is a "welcome.html", "index.html" or similar page that expects a GET. Hence the 405

    2. IF you want to validate the form, use the submit event

    3. You need to quote the IDs of the fields in getElementById

    Here is a fixed form with a fixed script, using recommended event handling

    window.addEventListener("DOMContentLoaded", () => { // when the page has loaded

  document.getElementById("myForm").addEventListener("submit", (e) => {
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;
    if (username === "judge1" && password === "1234") {
      alert("Login Successful");
      return true; // allow the submit
    }
    // no need to have an else after a return
    alert("Login Failed");
    e.preventDefault(); // do NOT submit the form
  });
});
    <form id="myForm" class="inputs" action="/somepostacceptingcode.php" method="POST">
  <input type="text" class="username" placeholder="Username" id="username"> <br/>
  <input type="password" class="password" placeholder="Password" id="password"> <br/>
  <input type="submit" value="Login">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search