2012-04-10 50 views
1

我正在创建一个网站页面,它具有不同的窗体,具体取决于用户输入的不同窗体的加载情况。根据用户输入加载不同的表单

当页面被加载时,询问用户他们是否想要注册有客户或卖家。取决于这个选择我将变量设置为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的块是未完成的,因为我不知道怎么办。请帮助,谢谢。

编辑:我用干净的工作之一取代了上面的代码。

+0

我们需要干净的代码才能工作。 – 2012-04-10 00:58:01

+0

我已将代码替换为干净的代码,工作一个。欢呼 – ErHunt 2012-04-10 01:12:56

+0

大声笑,线之间的空间很多? – 2012-04-10 01:20:25

回答

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每个部分:在sellerz


玩得开心customerz客户部和卖家节! ;-)

+0

谢谢你的帮助。 – ErHunt 2012-04-10 12:01:03

+0

@Badr不客气,我的朋友! :-) – 2012-04-10 13:50:32

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()函数:
  2. 正如您在html中看到的,我使用了两个复选框。当用户选择买方复选框时,
    (a)设置document.getElementById("form1").style.display="block"
    (b)将其他复选框设置为未选中。
    document.getElementById("seller").checked="false"

类似地使用反逻辑实现chooseSeller()函数。