-1

I've been trying to have a password only form that shows a hidden div on the same page as the form when the password is correct. I don't want to reload either but not sure how to do that.

function checkPswd() {
  var confirmpassword = "admin";
  var password = document.getElementById("pass").value;
  if (password == confirmpassword) {
    document.getElementById('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" onsubmit="checkPswd();" /></form>
<div class="hidden">
  <p>this part I want hidden from people who don't know the password</p>
</div>

I'm pretty sure the javascript is wrong but is there another way to do this?

aamirrri
  • 1
  • 1
  • An `` does not dispatch a `submit` event. Inline event handlers like `onsubmit` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Oct 07 '21 at 02:26
  • You never use `document.getElementById('hidden')` and you never define `x`. Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, simply use [`.classList.contains("hidden")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, and, in your case, directly `.classList.toggle("hidden")`, etc. Consider using the [`hidden` attribute](//developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) instead. – Sebastian Simon Oct 07 '21 at 02:28
  • Use `document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); /* The password check here. When ready to submit: */ event.target.submit(); });`. Consider using [`requestSubmit`](//developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit). – Sebastian Simon Oct 07 '21 at 02:30

1 Answers1

2

Few things:

  1. You forgot to assign the returned value of document.getElementById('hidden') to x

  2. A button does not have a submit event. You are perhaps looking for the click event

  3. There is no element with the hidden id. You are mixing it up with the element with the hidden class.

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>
Spectric
  • 30,714
  • 6
  • 20
  • 43