如何在单击登录按钮时隐藏注册表单，并且登录表单折叠反之亦然

Im trying to make the form of registration or login hide and when the register or login button is clicked, the form will collapse. The codes work just fine but i want to make it when the login button is clicked, the login form will collapse and when the user wants to click on the register button, the login form will hide and the register form will collapse vice versa. I've tried the javascript but it turns out to be a mess. Somebody please help

我试图使注册或登录的形式隐藏,当点击注册或登录按钮时,表单将崩溃。代码工作得很好,但我想在点击登录按钮时,登录表单将崩溃,当用户想要点击注册按钮时,登录表单将隐藏,注册表单将折叠反之亦然。我已经尝试过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>

2 个解决方案

#1

did you consider to use JQuery ? i am asking it because using Jquery is will be much more easy for you. Jquery contains some method which helps you handle hide/show/toggle forms and even with out of the box animations.

你考虑过使用JQuery吗?我问它,因为使用Jquery对你来说会更容易。 Jquery包含一些方法,可以帮助您处理隐藏/显示/切换表单,甚至包括开箱即用的动画。

You can read more about it in the following links:

您可以在以下链接中阅读有关它的更多信息:

jQuery show jQuery hide jQuery toggle

jQuery show jQuery隐藏jQuery切换

If i will try to apply jQuery to your code it will look something like the following:

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

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

#2

where is your form's action? if you can add it, then you can replace your code like this

你的表格在哪里行动?如果你可以添加它,那么你可以像这样替换你的代码

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


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

#1