javascript - フォーム A の送信ボタンをクリックすると、フォーム A が消え、代わりにフォーム B が表示されます。

Question

2 つのフォームがあり、1 つは表示され、もう 1 つは非表示になっています。フォーム A の送信ボタンをクリックすると、フォーム A が消え、代わりにフォーム B が表示されます。

私のコードでは、フォーム「signup」の送信ボタン(id="signup-btn1")をクリックすると、フォーム「signup」が非表示になり、フォーム「signup2」が表示されます。スタイルによると、両者はまったく同じ位置にあります。最初のフォームのコンテンツを 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 を使用することをお勧めします。これにより、コードがはるかに少なくなります。ありがとう