当单击登录按钮并且登录表单折叠时，如何隐藏注册表？

Question

我试图隐藏注册或登录表格，单击“注册”或“登录”按钮时，表格将折叠。 该代码工作得很好，但是我想在单击登录按钮时使它登录，登录表单将折叠，而当用户要单击注册按钮时，登录表单将隐藏并且注册表单将折叠，反之亦然。 我已经尝试过JavaScript，但事实证明这是一团糟。 有人请帮忙

     <button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#loginform" aria-expanded="false" aria-controls="collapseExample">LOGIN

                <script type="text/javascript">
                    var button = document.getElementById('loginbtn')
                    button.addEventListener('click',hideshow,false);

                    function hideshow() {
                    document.getElementById('loginform').style.display = 'block'; 
                    this.style.display = 'none'
                                        }
                    document.write("<br>")
                </script>
                </button>

                <button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#registerform" aria-expanded="false" aria-controls="collapseExample">
                    REGISTER

                <script type="text/javascript">
                    var button = document.getElementById('loginbtn')
                    button.addEventListener('click',hideshow,false);

                    function hideshow() {
                    document.getElementById('loginform').style.display = 'block'; 
                    this.style.display = 'none'
                                        }


                    document.write("<br>")
                </script>
                </button>


                    <div class="collapse" id="loginform">
                        <form class="form-horizontal" role="form" id="loginform">
                            <br>
                            <legend></legend>
                            <input type="text" class="form-control" placeholder="USERNAME" required>

                            <input type="password" class="form-control" placeholder="PASSWORD" required>

                            <br>

                            <input type="submit" class="form-control" role="button" id="logsubmit" value="LOGIN">

                        </form>
                    </div>


                    <br>

                <div class="collapse" id="registerform">
                        <form class="form-horizontal" role="form" id="registerform">
                            <br>
                            <legend></legend>
                            <input type="text" class="form-control" placeholder="USERNAME" required>
                            <input type="text" class="form-control" placeholder="CONFIRM USERNAME" required>

                            <input type="password" class="form-control" placeholder="PASSWORD"  required>
                            <input type="password" class="form-control" placeholder="CONFIRM PASSWORD" required>

                            <input type="email" class="form-control" placeholder="EMAIL" required>
                            <input type="email" class="form-control" placeholder="CONFIRM EMAIL" required>

                            <br>

                            <input type="submit"  role="button" class="form-control" id="regsubmit" value="REGISTER">

                    </form>
                </div>

Answer 1

您是否考虑过使用JQuery？ 我问这是因为使用Jquery对您来说会容易得多。 jQuery包含一些方法，可以帮助您处理隐藏/显示/切换表单，甚至使用开箱即用的动画。

您可以在以下链接中了解更多信息：

jQuery显示 jQuery隐藏 jQuery切换

如果我尝试将jQuery应用于您的代码，它将类似于以下内容：

$("#loginbtn").click(function(){
   $("#loginform").toggle();  // toggle will show hidden element and vice versa
});

Answer 2

表单的动作在哪里？ 如果可以添加它，则可以像这样替换代码

 <script type="text/javascript">
      function hideshow() {
      document.forms[0].submit();
      ...


 <input type='button' class="form-control"  value='LOGIN'  onclick="hideshow()" />