2012-04-10 15 views
1

私は異なるフォームを持つWebサイトページを作成していますが、ユーザー入力に応じて別のフォームがロードされます。ユーザーの入力に応じて異なるフォームがロードされます

ページが読み込まれると、ユーザーは顧客または売り手が登録するかどうかを尋ねられます。その選択に応じて、変数をTrueまたはFalseに設定すると関連するフォームがロードされていますが、これまで多くのことができましたが、ページには背景色だけがロードされます(これはJavaScriptを導入したときに発生しました)私は方法がわからないので、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<title>Customer/Reseller</title> 

    <link rel="stylesheet" type="text/css" href="styles.css" /> 

    <!--[if IE]> 

    <style type="text/css"> 
    .clear { 
     zoom: 1; 
     display: block; 
    } 
    </style> 
    <![endif]--> 

</head> 

<body> 

    <div class="section" id="page"> <!-- Defining the #page section with the section tag --> 

     <div class="header"> <!-- Defining the header section of the page with the appropriate tag --> 

      <h2>G51 Villain Supply</h2> 
      <h3>Delivering Technology </h3> 

      <div class="nav clear"> <!-- The nav link semantically marks your main site navigation --> 
       <ul> 
        <li><a href="index.html"> Home </a></li> 
        <li><a href="about.html"> About </a></li> 
        <li><a href="products.html"> Products </a></li> 
        <li><a href="app.html"> Customer/Reseller </a></li> 
        <li><a href="private.html"> Private </a></li> 
       </ul> 
      </div> 

     </div> 

     <div class="section" id="articles"> <!-- A new section with the articles --> 

      <!--start --> 
      <div class="line"></div> <!-- Dividing line --> 
      <div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
       <h2>Seller Section</h2> 
       <div class="line"></div> 
       <div class="articleBody clear"> 


     <form action="" method="seller"> 
      <fieldset> 
       <legend>Seller Registration Form</legend> 
       <br>Please complete </br> 
       <br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/> 
       <br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/> 
       <br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/> 
       <br><label for="email">Email:</label></br> <input type="text" name="email" id="email" /> 
       <p></p><p></p> 
       <p><label for="agree">&#160;</label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p> 
       <p><label for="btnsubmit">&#160;</label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p> 
       <p></p> 
      </fieldset> 
     </form>     
       </div> 
      </div> 

      <!-- end --> 
     </div> 

     <div class="section" id="articles"> <!-- A new section with the articles --> 
      <!--start --> 
      <div class="line"></div> <!-- Dividing line --> 

      <div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
       <h2>Customers Section</h2> 

       <div class="line"></div> 
       <div class="articleBody clear"> 
     <form action="" method="cust"> 
      <fieldset> 
       <legend>Customer Registration Form</legend> 
        <br>Please complete </br> 
        <br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/> 
        <br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/> 
        <br><label for="FAdd">First Line Address:</label></br> <input type="text" name="1stAdd" id="name"/> 
        <br><label for="PstAdd">Postcode:</label></br> <input type="text" name="PstAdd" id="name"/> 
        <br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/> 
        <br><label for="email">Email:</label></br> <input type="text" name="email" id="email" /> 
        <p></p><p></p> 
        <p><label for="agree">&#160;</label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p> 
        <p><label for="btnsubmit">&#160;</label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p> 
        <p></p> 
       </fieldset> 
     </form>     
       </div> 
      </div> 
      <!-- end --> 
     </div> 

    <div class="footer"> <!-- Marking the footer section --> 
     <div class="line"></div> 
     <p>Copyright 2012 - G51 Villain Supply </p> <!-- Change the copyright notice --> 
     <a href="#" class="up">Go UP</a> 
    </div> 

</div> <!-- Closing the #page section --> 

</body> 

のJavaScriptのいくつかのブロックが未完了です。助けてください、ありがとう。

編集:上記のコードを、JavaScriptを使用しないでクリーンなコードに置き換えました。

+0

作業にきれいなコードが必要です。 –

+0

私はコードをクリーンなコードに置き換えました。歓声 – ErHunt

+0

笑、行間にはどのくらいのスペースがありますか? –

答えて

1

、このいずれかを試してみてください、それは(片付けと固定)働いている:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title> 
      Customer/Reseller 
     </title> 
     <link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE]> 

    <style type="text/css"> 
    .clear { 
     zoom: 1; 
     display: block; 
    } 
    </style> 
    <![endif]--> 
    </head> 
    <body> 
     <div class="section" id="page"> 
      <!-- Defining the #page section with the section tag --> 
      <div class="header"> 
       <!-- Defining the header section of the page with the appropriate tag --> 
       <h2> 
        G51 Villain Supply 
       </h2> 
       <h3> 
        Delivering Technology 
       </h3> 
       <div class="nav clear"> 
        <!-- The nav link semantically marks your main site navigation --> 
        <ul> 
         <li> 
          <a href="index.html">Home</a> 
         </li> 
         <li> 
          <a href="about.html">About</a> 
         </li> 
         <li> 
          <a href="products.html">Products</a> 
         </li> 
         <li> 
          <a href="app.html">Customer/Reseller</a> 
         </li> 
         <li> 
          <a href="private.html">Private</a> 
         </li> 
        </ul> 
       </div> 
      </div><input type="button" value="I'm a customer" onclick="document.getElementById('customerz').style.visibility='visible';document.getElementById('sellerz').style.display='none';" /> 
      <input type="button" value="I'm a seller" onclick="document.getElementById('sellerz').style.visibility='visible';document.getElementById('customerz').style.visibility='none';"> 
      <div id="sellerz" style='visibility:hidden;'> 
       <div class="section" id="articles"> 
        <!-- A new section with the articles --> 
        <!--start --> 
        <div class="line"></div><!-- Dividing line --> 
        <div class="article"> 
         <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
         <h2> 
          Seller Section 
         </h2> 
         <div class="line"></div> 
         <div class="articleBody clear"> 
          <form action="" method="seller"> 
           <fieldset> 
            <legend>Seller Registration Form</legend><br /> 
            Please complete<br /> 
            <br /> 
            <label for="Fname">First Name:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="Lname">Last Name:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="Contact">Contact Number:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="email">Email:</label><br /> 
            <input type="text" name="email" id="email" /> 
            <p> 
             <label for="agree">&nbsp;</label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate. 
            </p> 
            <p> 
             <label for="btnsubmit">&nbsp;</label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /> 
            </p> 
           </fieldset> 
          </form> 
         </div> 
        </div><!-- end --> 
       </div> 
      </div> 
      <div id="customerz" style='visibility:hidden;'> 
       <div class="section" id="articles"> 
        <!-- A new section with the articles --> 
        <!--start --> 
        <div class="line"></div><!-- Dividing line --> 
        <div class="article"> 
         <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
         <h2> 
          Customers Section 
         </h2> 
         <div class="line"></div> 
         <div class="articleBody clear"> 
          <form action="" method="cust"> 
           <fieldset> 
            <legend>Customer Registration Form</legend><br /> 
            Please complete<br /> 
            <br /> 
            <label for="Fname">First Name:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="Lname">Last Name:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="FAdd">First Line Address:</label><br /> 
            <input type="text" name="1stAdd" id="name" /><br /> 
            <label for="PstAdd">Postcode:</label><br /> 
            <input type="text" name="PstAdd" id="name" /><br /> 
            <label for="Contact">Contact Number:</label><br /> 
            <input type="text" name="name" id="name" /><br /> 
            <label for="email">Email:</label><br /> 
            <input type="text" name="email" id="email" /> 
            <p> 
             <label for="agree">&nbsp;</label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate. 
            </p> 
            <p> 
             <label for="btnsubmit">&nbsp;</label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /> 
            </p> 
           </fieldset> 
          </form> 
         </div> 
        </div><!-- end --> 
       </div> 
      </div> 
       <div class="footer"> 
        <!-- Marking the footer section --> 
        <div class="line"></div> 
        <p> 
         Copyright 2012 - G51 Villain Supply 
        </p><!-- Change the copyright notice --> 
        <a href="#" class="up">Go UP</a> 
       </div> 
      </div><!-- Closing the #page section --> 
     </div> 
    </body> 
</html> 

JavaScriptがトリックをやって:

<input type="button" value="I'm a customer" onclick="document.getElementById('customerz').style.visibility='visible';document.getElementById('sellerz').style.display='none';" /> 
<input type="button" value="I'm a seller" onclick="document.getElementById('sellerz').style.visibility='visible';document.getElementById('customerz').style.visibility='none';"> 

他に何が...?

まあ、私はちょうど別のdiv内の各セクションを包ん:customerzにおける顧客のセクションとsellerz


における売り手のセクションでは、お楽しみに! ;-)

+0

ありがとうございました。 – ErHunt

+0

@Badrあなたは大歓迎です、私の友人! :-) –

2

これを行うには間違った方法です。スクリプトブロック内にページ全体を宣言しようとするべきではありません!!!あなたのスクリプトで使用すると、次のアルゴリズムをしなければならない今

<html> 
    <head> 
    <!-- Head content goes here --> 
    <script type="text/javascript"> 

    </script> 
    </head> 
    <body> 
    <!-- body content --> 
    <div id="chooser" class="chooserclass"> 
     <input type="checkbox" id="buyer" onclick="chooseBuyer()">Buyer</input> 
     <input type="checkbox" id="seller" onclick="chooseSeller()">Seller</input>   
    </div> 
    <div id="form1" class="form1css"> </div> 
    <div id="form2" class="form2css"> </div> 

    </body> 
</html> 

:代わりに次の擬似コードを使用

  1. form1cssform2cssの両方が、当初に設定してはならない「表示:なし」このような: document.getElementById("form1").style.display="none"
    ビルドこれをやってchooseBuyer()関数は:あなたがHTMLで見ることができるように
  2. 私は2つのチェックボックスを使用していました。ユーザが購入者のチェックボックスを選択した場合、
    (b)を設定し、もう一方のチェックボックスをオフにします。
    document.getElementById("seller").checked="false"

同様に、逆論理を使用してchooseSeller()関数を実装します。

関連する問題