表单打开onclick按钮

Question

I have a form. In which I have fields SCHOLARSHIP FORM, PAYMENT, REGISTRATION NO. and ADMIT CARD. If i click on SCHOLARSHIP FORM, its fieldset should be open. If I click PAYMENT, its fieldset should be replace existing and payment's fieldset should be open inplace of existing.

It is opening, but below old one. It is not replacing.

        <form id="msform">
         <!-- progressbar -->
          <ul id="progressbar">
          <li class="active"><a href = "#" onclick = "showForm1()">Scholarship Form</a></li>
           <li class="active"><a href = "#" onclick = "showForm()">Paymen</a>t</li>
           <li class="active">Registration No.</li>
       <li class="active">Admit Card</li>
     </ul>
     <!-- fieldsets -->
       <fieldset id = "theform1" style="display:none">
      <h2 class="fs-title">Scholarship Form</h2>
      <h3 class="fs-subtitle">Fill Your Details</h3>
        <input type="text" name="email" placeholder="Email" />
       <input type="password" name="pass" placeholder="Password" />
       <input type="password" name="cpass" placeholder="Confirm Password" />

      </fieldset>
        <script type = "text/javascript">
       function showForm1() {
        document.getElementById("theform1").style.display = "block";
      }
      </script>



       <fieldset id = "theform" style="display:none">
        <h2 class="fs-title">Payment</h2>
        <h3 class="fs-subtitle">Pay scholarship fee</h3>
          <input type="text" name="twitter" placeholder="Twitter" />
          <input type="text" name="facebook" placeholder="Facebook" />
          <input type="text" name="gplus" placeholder="Google Plus" />

       </fieldset>
       <script type = "text/javascript">
         function showForm() {
            document.getElementById("theform").style.display = "block";
       }
          </script>





         <fieldset>
       <h2 class="fs-title">Registration Number</h2>
       <h3 class="fs-subtitle">Download or Print your Registration Number</h3>
         <input type="text" name="fname" placeholder="First Name" />
        <input type="text" name="lname" placeholder="Last Name" />
          <input type="text" name="phone" placeholder="Phone" />
             <textarea name="address" placeholder="Address"></textarea>

       </fieldset>




        <fieldset>
     <h2 class="fs-title">Admit Card</h2>
          <h3 class="fs-subtitle">Download or Print Your Admit Card</h3>

                <input type="text" name="phone" placeholder="Phone" />
                  <textarea name="address" placeholder="Address"></textarea>

           </fieldset>
    </form>

Answer 1

Sounds like you need to hide any open form first.

function showForm1() {
    document.getElementById("theform1").style.display = "block";
    document.getElementById("theform").style.display = "none";
}

If you do this for both forms you should be all set.