close button in the sign in form HTML is not hiding the form it just take me to the page in the attribute of the action element. I used html and js

user_16400007 0
Viewed 68

I used the same way for the close sign up form and it worked but with the sign in form it is not working any one knows what the issue could be ?

function openSignInForm(){
    document.getElementById('loginform').style.display="block";      
}
function closeSignInForm(){
    document.getElementById('loginform').style.display="none";
}
<div id=loginform >
    <form method="post" action="loginForm.php">
        <?php include('errors.php'); ?>
        <div class="col-md-12">
            <label for="username" class="form-label">Username</label>
            <input type="text" name="username" class="form-control" >  
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" name="password" >
            </div>
        
            <div class="d-grid gap-2">
                <div class="btn-group" role="group" aria-label="Basic mixed styles example">
                <button class="btn btn-outline-success" name="login_user">Log In</button>
                <button class="btn btn-outline-success" onclick="closeSignInForm()">Close</button>
            </div>
        </div>
    </form>
</div>

the openSignInForm button works but the close one is not working. The div containing the form is displayed none so by default it is hidden until the user clicks the button.

html javascript
3 Answers

Try this:

<html>
  <body>
    <div>
      <form id="loginform" method="post" action="loginForm.php">
        <?php include('errors.php'); ?>
        <div class="col-md-12">
          <label for="username" class="form-label">Username</label>
          <input type="text" name="username" class="form-control" />

          <label for="password" class="form-label">Password</label>
          <input type="password" class="form-control" name="password" />
        </div>

        <div class="d-grid gap-2">
          <div
            class="btn-group"
            role="group"
            aria-label="Basic mixed styles example"
          >
            <button
              class="btn btn-outline-success"
              name="login_user"
              type="submit"
            >
              Log In
            </button>
          </div>
        </div>
      </form>
      <button class="btn btn-outline-success" id="b1" type="button"></button>
    </div>

    <script type="text/javascript">
      let button = document.getElementById("b1");
      let form = document.getElementById("loginform");
      button.innerHTML = "Open";
      button.addEventListener("click", toogle);
      let form_open = false;
      form.style.display = "none";
      function toogle() {
        if (form_open) {
          form.style.display = "none";
          button.innerHTML = "Open";
          form_open = false;
        } else {
          form.style.display = "block";
          button.innerHTML = "Close";
          form_open = true;
        }
      }
    </script>
  </body>
</html>
user_163681180

Try replacing your close button code with this:

<button class="btn btn-outline-success" onclick="closeSignInForm(this)">Close</button>

and your closeSignInForm function to this

function closeSignInForm(e){
    e.preventDefault();
    document.getElementById('loginform').style.display="none";
}
user_68278300

Buttons on a form submit the form by default. You can set the <button>'s type attribute to "button" to prevent this:

<button class="btn btn-outline-success" type="button" onclick="closeSignInForm()">Close</button>

Calling event.preventDefault() in the click handler also stops the automatic submit, see Amit Sharma's answer.

user_6001350
Related