javascript - 如果我单击订单表格，它应该显示而其他表格应该隐藏

Question

在此代码中，如果单击订单详细信息，则应显示该表单，如果单击该表单应显示的运输详细信息地址，则应隐藏该表单。但是，这两种形式都显示在我的代码中。

   <!DOCTYPE html>
    <html>
       <head>
           <script>
         function orderdetails() {
    document.getElementById('orderdetails').style.display = "block";
       }
         function shippingdetails() {
     document.getElementById('shippingdetails').style.display = "block";
       }
         function ordersummary() {
          document.getElementById('welcomeDiv1').style.display = "block";
           }
          function payment() {
          document.getElementById('welcomeDiv1').style.display = "block";
            }   
     </script>
     </head>

     <body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="javascript:void(0);" value="Show Div" onclick="orderdetails()" >Order                                               Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <a href="javascript:void(0);" value="Show Div1" onclick="shippingdetails()">Shipping             Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <a href="javascript:void(0);" value="Show Div12" onclick="ordersummary()">Order Summary</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <a href="javascript:void(0);" value="Show Div12" onclick="payment()">Payment</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       <div id="orderdetails"  style="display:none;" class="answer_list" > 
          <table width="200" border="0">
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <h3><u><b>Order Details</b></u></h3>
             <tr>
           <th scope="row"><label>Name*</label></th>
         <td><input name="name" type="text"></td>
          </tr>
          <tr>
           <th scope="row"><label>Email*</label>;</th>
             <td><input name="mail" type="text"></td>
            </tr>
           <tr>
              <th scope="row"><label>Mobile Number*</label></th>
         <td><input name="mobile" type="text"></td>
             </tr>
           <tr>
           <th scope="row"><label>Land Line</label></th>
           <td><input name="phone" type="text"></td>
           </tr>

        </table>

       </div>
          <div id="shippingdetails"  style="display:none;" class="answer_list" > 
           <br/>
             <table width="200" border="0">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <h3><u><b>Shipping Details</b></u></h3>
               <br/>
         <tr>
            <th scope="row"><label>Full Name*</label></th>
            <td><input name="name" type="text"></td>
           </tr>
          <tr>
               <th scope="row"><label>Address*</label></th>
         <td><textarea name="address" cols="" rows=""></textarea></td>
         </tr>
           <tr>
            <th scope="row"><label>Nearest Land Mark*</label>;</th>
           <td><input name="mail" type="text"></td>
          </tr>

         <tr>
            <th scope="row"><label>City</label></th>
           <td><input name="city" type="text"></td>
           </tr>
            <tr>
             <th scope="row"><label>State</label></th>
          <td><form name="form" id="form">
           <select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
    <option>Tamil Nadu</option>
    <option>Kerala</option>
    <option>Orissa</option>
    <option>Delhi</option>
    <option>Andhrs</option>
    <option>Karntaka</option>
  </select>
</form></td>
   </tr>
         <tr>
         <th scope="row"><label>Pin Code*</label></th>
        <td><input name="code" type="text"></td>
               </tr><tr>
          <th scope="row"><label>Mobile Number*</label></th>
          <td><input name="city" type="text"></td>
          </tr><tr>
           <th scope="row"><label>Land Line</label></th>
           <td><input name="city" type="text"></td>
     </tr>
       </table>
     </div>

     </body>
      </html>

score 2 · Accepted Answer

不要只显示表单，还要隐藏其他表单。

function orderdetails() {
    document.getElementById('orderdetails').style.display = "block";
    document.getElementById('shippingdetails').style.display = "none";
}
function shippingdetails() {
    document.getElementById('shippingdetails').style.display = "block";
    document.getElementById('orderdetails').style.display = "none";
}

为防止用户返回之前的表单，您可以检查他们是否已完成该特定表单。

在您的表单中，为所需项目指定一个类名：

<input name="name" type="text" class="order-required">
<input name="mail" type="text" class="order-required">
<input name="mobile" type="text" class="order-required">

并给“订单详情”链接一个 ID：

<a id="orderdetailslink" href="javascript:void(0);" value="Show Div" onclick="orderdetails()" >Order Details</a>

然后</body>在“订购详情”中查找所有必填字段：

<script>
var elems = document.getElementsByTagName('*'), i, orderRequired = new Array();
for (i in elems) {
    if((' ' + elems[i].className + ' ').indexOf(' ' + 'order-required' + ' ') > -1) {
        orderRequired.push(elems[i]);
    }
}
</script>

最后使用以下函数检查是否应允许用户返回订购详细信息表单。

function orderdetailscomplete() {
    for (var i = 0; i < orderRequired.length; i++) {
        if (orderRequired[i].value.length == 0) {
            return false;
        }
    }
    return true;
}
function orderdetails() {
    if (!orderdetailscomplete()) {
        document.getElementById('orderdetails').style.display = "block";
        document.getElementById('shippingdetails').style.display = "none";
    }
}
function shippingdetails() {
    document.getElementById('shippingdetails').style.display = "block";
    document.getElementById('orderdetails').style.display = "none";
    if (orderdetailscomplete()) {
        document.getElementById('orderdetailslink').innerHTML = 'Order Details (completed)';
    }
}

见小提琴。

score 1 · Accepted Answer

除了脚本之外，您的 html 格式严重错误。你真的需要阅读html。http://validator.w3.org/check甚至无法继续检查，直到您将该标题移出表格代码

这是我的版本。检查并修复 HTML

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <title>Order form</title>  
<script>
var divs = [];
function show(div) {
  for (var i=0;i<divs.length;i++) {
    document.getElementById(divs[i]).style.display=(div===divs[i])?"block":"none"; 
  }        
}
function MM_jumpMenu() {} // placeholder

window.onload=function() {
  document.getElementById("jumpMenu").onchange=function() {
    MM_jumpMenu('parent',this,0);
  }
  var links=document.getElementById("navigation").getElementsByTagName("a");
  for (var i=0;i<links.length;i++) {
    divs.push(links[i].id.replace("link",""));
    links[i].onclick=function() {
      show(this.id.replace("link",""));
    }
  }    
}
</script>         
  <style>
  ul#navigation {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #ccc;
  }
  ul#navigation li { display: inline; }
  ul#navigation li a {
    text-decoration: none;
    padding: .25em 1em;
    border-bottom: solid 1px #39f;
    border-top: solid 1px #39f;
    border-right: solid 1px #39f;
  }
  a:link, a:visited { color: #fff; }
  ul#navigation li a:hover {
    background-color: #fff;
    color:#000;
  }
  .shipping { width:200px; border:0}
  </style>
  </head>         
  <body> 
  <nav>       
    <ul id="navigation">  
      <li><a href="#" value="Show Div"   id="orderdetailslink">Order Details</a></li> 
      <li><a href="#" value="Show Div1"  id="shippingdetailslink">Shipping Details</a></li>             
      <!--li><a href="#" value="Show Div12" id="ordersummarylink">Order Summary</a></li> 
      <li><a href="#" value="Show Div12" id="paymentlink">Payment</a></li -->
    </ul>
  </nav>              
    <div id="orderdetails"  style="display:none;" class="answer_list" >
    <br/>
    <h3><u><b>Order Details</b></u></h3>  
      <table class="shipping">            
        <tr> 
          <th scope="row"><label>Name*</label></th>
          <td><input name="name" type="text"></td>
        </tr>
        <tr> 
          <th scope="row"><label>Email*</label>
          </th>
          <td><input name="mail" type="text"></td>  
        </tr> 
        <tr>    
          <th scope="row"><label>Mobile Number*</label></th>
          <td><input name="mobile" type="text"></td></tr> 
        <tr> 
          <th scope="row"><label>Land Line</label></th>
          <td><input name="phone" type="text"></td></tr>              
      </table>           
    </div>
    <div id="shippingdetails"  style="display:none;" class="answer_list" >   
      <br/>   
     <h3><u><b>Shipping Details</b></u></h3>     
      <table class="shipping">
        <tr>  
          <th scope="row"><label>Full Name*</label></th>
          <td><input name="name" type="text"></td></tr>
        <tr>     
          <th scope="row"><label>Address*</label></th>
          <td><textarea name="address"></textarea></td>             
        </tr> 
        <tr>  
          <th scope="row"><label>Nearest Land Mark*</label></th> 
            <td><input name="mail" type="text"></td>
        </tr>                
        <tr>  
          <th scope="row"><label>City</label></th>
          <td><input name="city" type="text"></td> 
        </tr>  
        <tr>   
          <th scope="row"><label>State</label></th>
          <td>
            <form name="form" id="form"> 
              <select name="jumpMenu" id="jumpMenu">        
                <option>Tamil Nadu</option>        
                <option>Kerala</option>        
                <option>Orissa</option>        
                <option>Delhi</option>        
                <option>Andhrs</option>        
                <option>Karntaka</option>      
              </select>    
            </form></td>       
        </tr>             
        <tr>             
          <th scope="row"><label>Pin Code*</label></th>
          <td><input name="code" type="text"></td>     
        </tr>
        <tr>
          <th scope="row"><label>Mobile Number*</label></th>
          <td><input name="city" type="text"></td>
        </tr>
        <tr> 
          <th scope="row"><label>Land Line</label></th>
          <td><input name="city" type="text"></td>         
        </tr>           
      </table>         
    </div>         
  </body>          
</html>

score 0 · Accepted Answer

您需要编写一个代码来隐藏打开的表单。你可以这样做：

function closeAll() {
     document.getElementById('orderdetails').style.display = "none";
     document.getElementById('shippingdetails').style.display = "none";
     document.getElementById('welcomeDiv1').style.display = "none";
}
function orderdetails() {
   closeAll();
   document.getElementById('orderdetails').style.display = "block";
}
function shippingdetails() {
     closeAll();
     document.getElementById('shippingdetails').style.display = "block";
}
function ordersummary() {
   closeAll();
   document.getElementById('welcomeDiv1').style.display = "block";
}
function payment() {
    closeAll()
    document.getElementById('welcomeDiv1').style.display = "block";
}

请参阅隐藏所有 div 的 closeAll 函数。只是为了不寻找打开的div。我也关闭了welcomeDiv1。不确定你是否需要那个。

score 0 · Accepted Answer

好吧，如果您想一次显示一个表单，您应该最初隐藏它们并只显示第一个出现的表单。

然后在每个功能中，您应该隐藏其他功能。到目前为止，Fangel 有更好的解决方案。

两个提示：

删除所有这些空格 ( ) 并尝试使用一些 css。
对于 javascript，我建议您使用一些 js 框架，例如 jQuery。

祝你好运！

javascript - 如果我单击订单表格，它应该显示而其他表格应该隐藏

4 回答 4

Related

Reference