0

我有两种形式，一种是显示的，另一种是隐藏的。单击表单 A 的提交按钮时，表单 A 应该消失，而在它的位置，表单 B 应该出现。

在我的代码中，点击表单“signup”的提交按钮（id="signup-btn1"），表单“signup”应该隐藏并且表单“signup2”应该显示。根据样式，它们都处于完全相同的位置。只需将第一个表单内容切换为第二个即可。

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 是首选，应该会导致更少的代码。谢谢

4

1 回答 1

2

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

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

如果您的页面只有上述两种形式，则可以使用 :)

于 2013-05-02T01:50:54.923 回答