フォームを開くボタンをクリック

Question

私はフォームを持っています。私はフィールドがあります奨学金書式、支払い、登録番号。およびADMIT CARDを入力します。私がSCHOLARSHIP FORMをクリックすると、フィールドセットが開いているはずです。お支払いをクリックすると、フィールドセットを既存のものに置き換え、お支払いのフィールドセットを既存のものに変更する必要があります。

開封ですが古いものはありません。それは置き換えていません。

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

2つ目に：

 <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

最初に開いているフォームを非表示にする必要があります。

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

これを両方のフォームで行う場合は、すべて設定する必要があります。

Answer 2

あなたは、あなたが最初のJavaScriptタグに追加する必要があることを行うには、セクションを表示したときにnoneに表示を切り替える必要がある

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