javascript - 单击表单 A 的提交按钮后，表单 A 应该消失，取而代之的是表单 B 应该出现

Question

我有两种形式，一种是显示的，另一种是隐藏的。单击表单 A 的提交按钮后，表单 A 应该消失，取而代之的是表单 B。

在我的代码中，单击“注册”表单的提交按钮(id="signup-btn1")时，"注册"表单应该隐藏，而"注册2"表单应该显示。根据样式，它们都处于完全相同的位置。这只是将第一个表单内容切换为第二个表单内容的问题。

HTML如下:

           <div class="signup-form">
                <form class="signup" name="sign-up" method="post" action="">
                    <input type="email" name="signup-email" value="" placeholder="E-mail" class="signup-email" />
                    <input type="password" name="signup-password" value="" placeholder="Password" />
                    <input type="password" name="signup-confirmpassword" value="" class="c-password" placeholder="Confirm Password" />
                    <input type="submit" id="signup-btn1" name="signup-btn" value="Sign up" class="signup-btn" />
                </form>

                <form class="signup2" name="sign-up2" method="post" action="">
                    <h2>Step 2</h2>
                    <p>Please enter your school name to complete the sign up.</p>
                    <input type="text" name="school-name" value="" class="school-input" placeholder="School Name" />
                    <input type="submit" name="complete-signup" value="Complete Sign up" class="signup-btn" />
                </form>

            </div>

首选使用 jQuery，这样代码会少得多。谢谢

Answer 1

将每个表单放在一个 div 中，然后:

$("button").click(function(){
$("#div1").toggle();
$("#div2").toggle();
})

如果您的页面只有上述两种形式，则工作:)