Question

我有一张表格。我有哪些领域SCHOLARSHIP FORM，PAYMENT，REGISTRATION NO。和ADMIT CARD。如果我点击SCHOLARSHIP FORM，它的字段集应该是打开的。如果我点击付款，其字段集应该替换现有付款，付款的字段集应该在现有的位置打开。

开放，但低于旧的。它没有取代。

        <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

您需要在显示某个部分时将显示切换为无，为此您需要在第一个javascript标记中添加：

document.getElementById("theform").style.display = "none";

在第二个：

document.getElementById("theform1").style.display = "none";

Answer 2

听起来你需要先隐藏任何打开的表格。

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

如果你对这两种形式都这样做，你应该全部设定。

表单打开onclick按钮

2 个答案: