当点击表单A的提交按钮时，表单A应该会消失，而在它的位置，表单B应该会出现

On click of submit button of form A, form A should disappear, and in its place, form B should appear

本文关键字：表单 位置 消失 按钮 提交      更新时间：2023-09-26

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

在我的代码中，点击提交按钮(id="signup-btn1")的表单"signup"，表单"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，这样代码会少得多。由于

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

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

如果你的页面只有2个以上的形式:)

相关文章：