CODEWITHSUNDEEP
javascripthtml
Дони Иванов
Дони Иванов

Reputation: 3

Javascript that checks for password input to enable a button

I failed asking this as my first question, hope this I do better.

"I just learned the basics of HTML/CSS but have almost to no idea of javascript. And I am making a website where I have a password box with a link button(disabled by default) leading to another page. My struggle is how to make a single password that when entered can enable that button in order to enter the other page. Sorry for my noobish question but am too new in the programming world."

So the html part for what I'm trying to do is:

<div class="whole">
        <div>
            <input type="password" placeholder="PASSWORD" required id="password" class="pass">
        </div>

        <div>

            <a href="link">
                <button class="button" id="button" type="submit" disabled>Click me!!!</button>
            </a>

        </div>

    </div>

And all that I could do by research and on my own with the script was:

<script>
        var pass1 = "pass";
        var pass2 = document.getElementById("password");
        if (pass1 == pass2) {
            document.getElementById("button").disabled = false;
        }
    </script>

Sorry for my clumsiness again!
Thank you!!! :)

Upvotes: 0

Views: 1729

Answers (3)

Rahul Desai
Rahul Desai

Reputation: 15501

You are close and you need a few more things.

Checkout the code below with // inline comments:

function myCheck(){ // called everytime password is entered
  var pass1 = "pass";
  var pass2 = document.getElementById("password").value;  // you missed "value" !
  if (pass1 == pass2) {
    document.getElementById("button2").disabled = false;  // enable link here
  }
}
<div class="whole">

  <div>
    <input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="myCheck()"> <!-- myCheck() is called everytime the keyboard key goes from down to up -->
  </div>

  <div>
    <a id="button2" href="http://rahul-desai3.github.io/chat/" disabled>button</a> <!-- notice the "disabled" attribute and NO <button> element -->
  </div>

</div>

To make the link look like a button, use CSS.

Upvotes: 0

Ram
Ram

Reputation: 117

<div class="whole">
    <div>
        <input type="password" placeholder="PASSWORD" required id="password" onkeyup="check()" class="pass">
    </div>

    <div>

        <a href="link">
            <button class="button" id="button" type="submit" disabled="true">Click me!!!</button>
        </a>

    </div>

</div>



  <script type="text/javascript">
    var pass1 = "pass";

    function check(){
       var pass2 = document.getElementById("password").value;
         if (pass1 == pass2) {
                 document.getElementById("button").disabled = false;
       }
    }

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

I created a fiddle , check it, I hope it will work

https://jsbin.com/qozawoj/edit?html,js,output

<div class="whole">
    <div>
      <input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="check()">
    </div>

    <div>

      <button class="button" id="button" type="submit" onclick="go()" disabled="true">Click me!!!</button>

    </div>

  </div>

JS

var pass1 = "pass";
var pass2 = document.getElementById("password");

function check(){

  if (pass1 == pass2.value) {
       document.getElementById("button").disabled = false;
        }
}

function go (){
  alert('go');
}

Upvotes: 0

Related Questions