Home/ Questions/Q 9239347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:58:00+00:00

In this code, if I click the order details, that form should display, and

  • 0

In this code, if I click the order details, that form should display, and if I click the shipping details address that form should display and the order form should hide.
However here both the forms are displaying in my code.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t just display the form, hide the others as well.

    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";
}

    To prevent users from going back to the previous form, you can check if they have completed that particular form.

    In your form, give the required items a class name:

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

    And give the “Order Details” link an ID:

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

    Then put down the following before </body> to look for all the required fields in “Ordering Details”:

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

    Finally use the following functions to check if the user should be allowed to go back to the ordering details form.

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

    See fiddle.

    • 0