0

このコードでは、注文の詳細をクリックするとそのフォームが表示され、配送先の詳細アドレスをクリックするとそのフォームが表示され、注文フォームが非表示になります。ただし、ここでは両方のフォームがコードに表示されています。

   <!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>
4

4 に答える 4

2

フォームを表示するだけでなく、他のフォームも非表示にします。

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)';
    }
}

フィドルを参照してください。

于 2013-02-05T09:21:17.927 に答える
1

スクリプトとは別に、あなたの 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>
于 2013-02-05T10:02:44.520 に答える
0

一度に 1 つのフォームを表示する場合は、最初は非表示にして、最初に表示されるフォームのみを表示する必要があります。

次に、すべての関数で、他の関数を非表示にする必要があります。これまでのところ、FAngel の方が優れたソリューションを提供しています。

2 つのヒント:

  1. これらの空白スペース ( ) をすべて削除し、いくつかの CSS を使用してみてください。
  2. また、javascript については、jQuery などの js フレームワークを使用することをお勧めします。

幸運を！

于 2013-02-05T09:25:02.863 に答える
0

開いているフォームを非表示にするコードを記述する必要があります。次のように実行できます。

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を閉じています。それが必要かどうかわかりません。

于 2013-02-05T09:22:08.590 に答える