点击表格A的提交按钮,表格A应该消失,并且在其位置,表格B应该出现

时间:2013-05-02 01:40:10

标签: javascript jquery css

我有两种形式,一种是显示而另一种是隐藏的。点击表格A的提交按钮,表格A应该消失,并且在其位置,表格B应该出现。

在我的代码中,单击“注册”形式的提交按钮(id =“signup-btn1”),表单“注册”应该隐藏并形成“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,应该会导致代码少得多。感谢

1 个答案:

答案 0 :(得分:2)

将每个表格放在div中,然后:

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

如果您的网页上只有2个以上表格,请继续工作:)