[ANSWERED] javascript – 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

Question 1

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>

Question 2

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";
}

Question 3

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.

Question 4

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.

Bollate

[ANSWERED] javascript – 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

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate