SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display:none and validation

    Hello all,
    I just ran into something I don't know how to get out of. I recently got some help from Paul (thank you Paul) with some CSS display:none to hide and display items on a form depending on what the user selects. Well, that works perfectly but my problem now is that it renders in the background. With that said, my form validation is picking up the "unselected" hidden drop downs. Is there a way to stop these drop down menus from rendering? Maybe I could handle these differently from my JavaScript? I really don't know of this is a CSS issue or JavaScript, or both.

    Basically this is what happens, I have the end user select a shipping carrier so I can then display these services offered by the selected carrier. My JavaScript is trying to validate the unselected carrier services when I submit the form. Here is the code rendered by the browser:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TSRI's Ready To Ship</title>
    <link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css" />
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function validate() 
    {
    	var billing	=	document.getElementById('billing');
    	var carrier	=	document.getElementById('carrier');
    	var deliveryType=	document.getElementById('deliveryType');
    	
    	if(madeSelection(billing, "Please select billing type")){
    	if(madeSelection(carrier, "Please select a carrier")){
    	if(madeSelection(deliveryType, "Please select the delivery type")){
    
    	return true;
    
    	}}}
    
    	return false;
    	
    	function madeSelection(elem, helperMsg)
    	{
    		if(elem.value == "select")
    		{
    			alert(helperMsg);
    			elem.focus();
    			return false;
    		}
    		else
    		{
    			return true;
    		}
    	}
    }
    
    function display(obj,id1,id2,id3,id4,id5) 
    {
    	txt = obj.options[obj.selectedIndex].value;
    	document.getElementById(id1).style.display = 'none';
    	document.getElementById(id2).style.display = 'none';
            document.getElementById(id3).style.display = 'none';
            document.getElementById(id4).style.display = 'none';
            document.getElementById(id5).style.display = 'none';
    	
    	if(txt.match(id1)) 
    	{
    		document.getElementById(id1).style.display = '';
                    document.getElementById(id2).style.display = 'none';
                    document.getElementById(id3).style.display = 'none';
                    document.getElementById(id4).style.display = 'none';
                    document.getElementById(id5).style.display = 'none';
    	}
    	
            if(txt.match(id2)) 
    	{
    		document.getElementById(id1).style.display = 'none';
                    document.getElementById(id2).style.display = '';
                    document.getElementById(id3).style.display = 'none';
                    document.getElementById(id4).style.display = 'none';
                    document.getElementById(id5).style.display = 'none';
    	}
            
            if(txt.match(id3)) 
    	{
    		document.getElementById(id1).style.display = 'none';
                    document.getElementById(id2).style.display = 'none';
                    document.getElementById(id3).style.display = '';
                    document.getElementById(id4).style.display = 'none';
                    document.getElementById(id5).style.display = 'none';
    	}
            
            if(txt.match(id4)) 
    	{
    		document.getElementById(id1).style.display = 'none';
                    document.getElementById(id2).style.display = 'none';
                    document.getElementById(id3).style.display = 'none';
                    document.getElementById(id4).style.display = '';
                    document.getElementById(id5).style.display = 'none';
    	}
            
            if(txt.match(id5)) 
    	{
    		document.getElementById(id1).style.display = 'none';
                    document.getElementById(id2).style.display = 'none';
                    document.getElementById(id3).style.display = 'none';
                    document.getElementById(id4).style.display = 'none';
                    document.getElementById(id5).style.display = '';
    	}
    }
    
    </SCRIPT>
    
    </head>
    
    <body class="thrColFixHdr">
    
    <div id="container">
    <div id="header">
    <img src="http://www.sitepoint.com/forums/images/banner3.png" width="1000" height="150" alt="Ready To Ship!" />	
    </div>
    <!-- end #header -->
    <div id="sidebar1">
    <p><strong>You are logged on as Francisco Carpio</strong></p>    <p><a href="Step1_shipmentType.php">Generate Shipment</a></p>
        <p><a href="reports.php">My Transactions</a></p>
    <p><a href="retrievepwd.php">Reset Password</a></p>
    
        <p><strong>My Address Book</strong></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addressBook.php">Select</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrNew.php">Add New</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrEdit.php">Edit</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrRemove.php">Remove</a></p>
            <p><strong>EH&amp;S Approvals</strong>&nbsp;(0)</p>
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=BIO">Biological</a></p>
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=RAD">Radiological</a></p>
    
         	<p><strong>S&amp;R Main</strong>&nbsp;(0)</p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrGetTrack.php">Enter Tracking #'s</a></p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrSearch.php">Search</a></p>
         	<!--
                    <p><strong>Admin</strong></p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="stats.php">Stats</a></p>
          -->
            <p><strong>Logoff</strong></p>
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="logoff.php">Logoff</a></p>
        <br>
        <br>
    <!-- end #sidebar1 -->
    </div>
    <div id="sidebar2">
    <h2>some output goes here</h2>  <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1>Shipping Options</h1>
        <form id="form1" name="form1" method="post" action="Step6_itemsShipped.php" onSubmit="return validate()">
        <table width="575" border="0" cellspacing="1" cellpadding="1">
        <tr>
        <th colspan="2"><p>Enter Shipping Options</p></th>
        </tr>
          <tr>
            <td width="30%"><p>Billing:</p></td>
            <td width="70%">
              <p>
                <label for="billing"></label>
                <select name="billing" id="billing" tabindex="1">
                <option value="select" selected>Select</option>
                <option value="Sender">Bill Sender</option>
                <option value="Recipient">Bill Recipient</option>
                <option value="3rd Party">Bill Third Party</option>
                </select>
              </p>
              </td>
          </tr>
          <tr>
            <td><p>Carrier:</p></td>
            <td><p>
              <label for="carrier"></label>
              <select name="carrier" id="carrier" tabindex="2" onChange="display(this,'other','FedEx','UPS','DHL','USPS');">
              	<option value="select" selected>Select</option>
              	<option value="FedEx">FedEx</option>
              	<option value="UPS">UPS</option>
              	<option value="DHL">DHL</option>
              	<option value="USPS">USPS</option>
              	<option value="other">Other</option>
              </select>
            </p>
            </td>
          </tr>
          
          <tr>
            <tbody id="other" style="display: none;">
              <td><p>Carrier Name:</p></td>
              <td><input type="text" name="carrierName" id="carrierName" tabindex="3" maxlength="100" /></td>
            </tbody>  
          </tr>
          <tbody id="FedEx" style="display: none;">
              <tr>
                <td><p>Delivery Type:</p></td>
                <td><p>
                  <label for="deliveryType"></label>
                  <select name="deliveryType" id="deliveryType" tabindex="4">
                  <option value="select" selected>Select</option>
                  <option value="Domestic Same Day">Domestic Same Day</option>
                  <option value="Domestic First Overnight">Domestic First Overnight</option>
                  <option value="Domestic Priority Overnight">Domestic Priority Overnight</option>
                  <option value="Domestic Standard Overnight">Domestic Standard Overnight</option>
                  <option value="Domestic 2 Day">Domestic 2 Day</option>
                  <option value="Domestic Express Saver">Domestic Express Saver</option>
                  <option value="Domestic Ground">Domestic Ground</option>
                  <option value="Domestic Home Delivery">Domestic Home Delivery</option>
                  <option value="International Next Flight">International Next Flight</option>
                  <option value="International First">International First</option>
                  <option value="International Priority">International Priority</option>
                  <option value="International Economy">International Economy</option>
                  <option value="International Ground">International Ground</option>
                  <option value="International Mail Service Premium">International Mail Service Premium</option>
                  <option value="International Mail Service Standard">International Mail Service Standard</option>
                  <option value="Freight">Freight</option>
                  <option value="Freight Ground">Freight Ground</option>
                  <option value="Freight Trade Networks">Freight Trade Networks</option>
                  <option value="Freight Express Freight">Freight Express Freight</option>
                  <option value="Freight Custom Critical">Freight Custom Critical</option>
                  <option value="Freight Expedited Services">Freight Expedited Services</option>              
                  </select> <a href="http://www.fedex.com/us/services/deliveryoptions.html" target="_blank" >Definitions</a>
                </p></td>
              </tr>    
          </tbody>   
          <tbody id="UPS" style="display: none;">
              <tr>
                <td><p>Delivery Type:</p></td>
                <td><p>
                  <label for="deliveryType"></label>
                  <select name="deliveryType" id="deliveryType" tabindex="4">
                  <option value="select" selected>Select</option>
                  <option value="Next Day Air Early AM">Next Day Air Early AM</option>
                  <option value="Next Day Air">Next Day Air</option>
                  <option value="Next Day Air Saver">Next Day Air Saver</option>
                  <option value="2nd Day Air AM">2nd Day Air AM</option>
                  <option value="2nd Day Air">2nd Day Air</option>
                  <option value="3 Day Select">3 Day Select</option>
                  <option value="Ground">Ground</option>
                  <option value="Worldwide Express Plus">Worldwide Express Plus</option>
                  <option value="Worldwide Express">Worldwide Express</option>
                  <option value="Worldwide Saver (Express)">Worldwide Saver (Express)</option>
                  <option value="Worldwide Expedited">Worldwide Expedited</option>
                  <option value="Standard">Standard</option>
                  </select> <a href="http://www.ups.com/worldshiphelp/WS12/ENU/AppHelp/Codes/UPS_Service_Codes.htm" target="_blank" >Definitions</a>
                </p></td>
              </tr>    
          </tbody> 
                <tbody id="DHL" style="display: none;">
              <tr>
                <td><p>Delivery Type:</p></td>
                <td><p>
                  <label for="deliveryType"></label>
                  <select name="deliveryType" id="deliveryType" tabindex="4">
                  <option value="select" selected>Select</option>
                  <option value="select">--DHL Domestic:</option>
                  <option value="DHL JetLine">DHL JetLine</option>
                  <option value="DHL SprintLine">DHL SprintLine</option>
                  <option value="DHL SecureLine">DHL SecureLine</option>
                  <option value="DHL Domestic Express 9:00">DHL Domestic Express 9:00</option>
                  <option value="DHL Domestic Express 10:30">DHL Domestic Express 10:30</option>
                  <option value="DHL Domestic Express 12:00">DHL Domestic Express 12:00</option>
                  <option value="DHL Domestic Express 18:00">DHL Domestic Express 18:00</option>
                  <option value="DHL Domestic Express EASY">DHL Domestic Express EASY</option>
                  <option value="DHL Domestic Economy Select">DHL Domestic Economy Select</option>
                  <option value="select">--DHL International:</option>
                  <option value="DHL JetLine">DHL JetLine</option>
                  <option value="DHL SprintLine">DHL SprintLine</option>
                  <option value="DHL SecureLine">DHL SecureLine</option>
                  <option value="DHL Express 9:00">DHL Express 9:00</option>
                  <option value="DHL Express 10:30">DHL Express 10:30</option>
                  <option value="DHL Express 12:00">DHL Express 12:00</option>
                  <option value="DHL WorldWide">DHL WorldWide</option>
                  <option value="DHL Express ENVELOPE">DHL Express ENVELOPE</option>
                  <option value="DHL Economy Select">DHL Economy Select</option>
                  <option value="DHL GlobalMail Business">DHL GlobalMail Business</option>
                  </select> <a href="http://www.dhl.com/en/express/domestic_services.html" target="_blank" >Definitions</a>
                </p></td>
              </tr>    
          </tbody>
                <tbody id="USPS" style="display: none;">
              <tr>
                <td><p>Delivery Type:</p></td>
                <td><p>
                  <label for="deliveryType"></label>
                  <select name="deliveryType" id="deliveryType" tabindex="4">
                  <option value="select" selected>Select</option>
                  <option value="Express Mail">Express Mail</option>
                  <option value="Priority Mail">Priority Mail</option>
                  <option value="First Class Mail">First Class Mail</option>
                  <option value="Parcel Post">Parcel Post</option>
                  <option value="Bound Printed Matter">Bound Printed Matter</option>
                  <option value="Periodicals">Periodicals</option>
                  <option value="Media Mail">Media Mail</option>
                  <option value="Library Mail">Library Mail</option>
                  <option value="International Delivery Services">International Delivery Services</option>
                  </select> <a href="http://www.usps.com/all/shippingandmailing/welcome.htm" target="_blank" >Definitions</a>
                </p></td>
              </tr>    
          </tbody> 
          <tr>
            <td><p>Carrier Account No.:</p></td>
            <td><p>
              <label for="carrierAcc"></label>
              <input type="text" name="carrierAcc" id="carrierAcc" tabindex="5" />
            </p></td>
          </tr>
          <!--
          <tr>
            <td><p>Delivery Type:</p></td>
            <td><p>
              <label for="deliveryType"></label>
              <select name="deliveryType" id="deliveryType" tabindex="5">
              <option value="select" selected>Select</option>
              <option value="Overnight">Overnight</option>
              <option value="2-Day">2 Day</option>
              <option value="3-Day">3 Day</option>
              <option value="Ground">Ground</option>
              </select>
            </p></td>
          </tr>
          -->
          <tr>
            <td><p>Notes:</p></td>
            <td><p>
              <label for="notes"></label>
              <textarea name="notes" id="notes" cols="45" rows="5" tabindex="6"></textarea>
            </p></td>
          </tr>
        </table>
    
        <p><input type="submit" name="next" id="next" value="Next" tabindex="7" />
        </p>
        </form>
    	<!-- end #mainContent --></div>
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
      <p>Footer message goes here</p>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    Thanks in advance,

    FC

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    What combination of options should we select in order to experience the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    FedEx is the only option that does not fail validation on the "delivery type" field. Could it be that only the FedEx selection is being validated? So when you select any option other than FedEx it will hide FedEx but will still validate it and fail validation. Just a guess...

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I found the solution, it was actually quite simple. I only had to change the conditions on my drop down validation script to only check the visible fields. Here is the code:


    function madeSelection(elem, helperMsg)
    {
    if(elem.value == "select" && elem.getStyle('display') == '')
    //if(elem.value == "select")
    {
    alert(helperMsg);
    elem.focus();
    return false;
    }
    else
    {
    return true;
    }
    }


    Seems to be working just fine.

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it is validating the correct drop down based on the display but the form is not submitting the correct drop down. The form submits the first one it encounters. How can I control which one of my drop downs I submit based on the user's selection?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Give them all a different name so that on the server side, you can use the selected type to determine which one to pay attention to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •