How can I validate a password input in a form on click and reveal a hidden div on the same page without refreshing?

Question

How can I validate a password input in a form on click and reveal a hidden div on the same page without refreshing?

I've been attempting to create a password-only form that reveals a hidden div on the same page when the correct password is entered. I want to avoid reloading the page, but I'm unsure of how to achieve this.

function checkPassword() {
  var confirmPassword = "admin";
  var password = document.getElementById("pass").value;
  if (password == confirmPassword) {
    var x = document.querySelector('.hidden');
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      alert('Try again.');
      x.style.display = "none";
    }
  }
}

.hidden {
  display: none;
}

<form method="post">
  <label for="pswd">Enter Password</label>
  <input type="password" id="pass">
  <input type="button" value="Go" onclick="checkPassword();" /></form>
<div class="hidden">
  <p>This section should only be visible to users who know the password.</p>
</div>

I suspect that the JavaScript code may be incorrect. Are there any alternative methods to accomplish this task?

javascript html css forms passwords

Answer 1

Answer №1

Here are a few key points to note:

Make sure to assign the value returned by
```
document.getElementById('hidden')
```
to a variable like x
Buttons do not have a submit event, consider using the click event instead
Double check your element IDs - it seems like you may be confusing an ID with a class in this scenario

function checkPswd() {
  var confirmpassword = "admin";
  var password = document.getElementById("pass").value;
  if (password == confirmpassword) {
    var x = document.querySelector('.hidden');
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      alert('tryagain');
      x.style.display = "none';
    }
  };
}

.hidden {
  display: none;
}

<form method="post">
  <label for="pswd">enter password</label>
  <input type="password" id="pass">
  <input type="button" value="go" onclick="checkPswd();" /></form>
<div class="hidden">
  <p>this part I want hidden from people who don't know the password</p>
</div>

Answer 2

Here are a few key points to note:

Make sure to assign the value returned by
```
document.getElementById('hidden')
```
to a variable like x
Buttons do not have a submit event, consider using the click event instead
Double check your element IDs - it seems like you may be confusing an ID with a class in this scenario

function checkPswd() {
  var confirmpassword = "admin";
  var password = document.getElementById("pass").value;
  if (password == confirmpassword) {
    var x = document.querySelector('.hidden');
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      alert('tryagain');
      x.style.display = "none';
    }
  };
}

.hidden {
  display: none;
}

<form method="post">
  <label for="pswd">enter password</label>
  <input type="password" id="pass">
  <input type="button" value="go" onclick="checkPswd();" /></form>
<div class="hidden">
  <p>this part I want hidden from people who don't know the password</p>
</div>

How can I validate a password input in a form on click and reveal a hidden div on the same page without refreshing?

Answer №1

Similar questions

Using JQuery to SlideUp with a Background Color Fading Behind an Image

Using the data from two input fields, an ajax request is triggered to dynamically populate the jQuery autocomplete feature

Centering two images by stacking them with Bootstrap 5

The text does not automatically move to the next line

The table is not visible when using Bootstrap Vue

Inside the function() in angular 2, the value of 'this' is not defined

Tips for concealing the edges of a scroll bar while utilizing scroll as overflow

What is the best way to stack text boxes vertically in CSS/HTML?

Developing an npm console application that is "installable" similar to tools like yeoman, gulp, or grunt

I'm attempting to create a button that changes to a bold red color when the condition is met

JQuery is failing to properly return the string containing special characters like apostrophes

Stop unwanted spam submissions on my form

What is the best way to align text in the middle on smaller devices like phones and iPads?

Utilize Python to extract a table from an HTML document

Show the user's input on the canvas

Update the directive automatically whenever a change occurs in the root scope property

Using $sce in ng-repeat within Angular configuration parameters

Is it necessary to clear out older node.js sessions that are saved in a database?

Issue with ng-cloak not resolving flicker on button in Chromium; strangely, ng-cloak CSS doesn't apply as expected

Implementing visibility toggles for objects in three.js using a graphical user interface