Submit button taking me to link that states HTTP ERROR 405. How do I prevent this, so i can allow it-CodePudding

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 >
    <form   method="post">
      <h3>login</h3>

      <div >
        <input type="text" placeholder="enter username" id="username" name="usernmame" value="">
      </div>
      <div >
        <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

CodePudding user response：

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 >
          <h3>login</h3>
        
          <div >
            <input type="text" placeholder="enter username" id="username" name="usernmame" value="">
          </div>
          <div >
            <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>

CodePudding user response：

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  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 >
      <h3>login</h3>

      <div >
        <input type="text" placeholder="enter username" id="username" name="usernmame" value="">
      </div>
      <div >
        <input type="password" placeholder="enter password" id="password"">
      </div>
      <button id="btn" onclick="validate()">login</button>
    </form>
  </div>

function validate(){
  let username = document.getElementById('username').value;

  let password=document.getElementById('password').value;
 

  if(username =='please' && password == 'work')
  {
    alert('finally');
  } else{
    alert("NOOOO")
  }
}