Hello all,
What I am trying to achieve is to have a drop down menu that displays other fields based on what is selected. In this example I want to ask the end user to select a carrier (FedEx, UPS, etc), but there is an “other” option for freight carriers. If they select “other” I want to show another text field where I would collect the freight carrier’s name. The field starts as invisible using the CSS display set to none property. The problem I am having is that it does not start hidden and I cannot get it to go away so I can display it when needed. Any other ideas on how to achieve this are greatly appreciated.
Thanks in advance for the help.
This is my 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 unhide(divID)
{
var item = document.getElementById(divID);
if(item)
{
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</SCRIPT>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<img src="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>   <a href="addressBook.php">Select</a></p>
<p>   <a href="addrNew.php">Add New</a></p>
<p>   <a href="addrEdit.php">Edit</a></p>
<p>   <a href="addrRemove.php">Remove</a></p>
<p><strong>EH&S Approvals</strong> (0)</p>
<p>   <a href="ehsApprovals.php?transType=BIO">Biological</a></p>
<p>   <a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>
<p>   <a href="ehsApprovals.php?transType=RAD">Radiological</a></p>
<p><strong>S&R Main</strong> (0)</p>
<p>   <a href="snrGetTrack.php">Enter Tracking #'s</a></p>
<p>   <a href="snrSearch.php">Search</a></p>
<p><strong>Admin</strong></p>
<p>   <a href="stats.php">Stats</a></p>
<p><strong>Logoff</strong></p>
<p>   <a href="logoff.php">Logoff</a></p>
<!-- 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 onchange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
<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>
<div id="other" class="hidden">
<tr>
<td><p>Carrier Name:</p></td>
<td><input type="text" name="carrierName" id="carrierName" tabindex="3" /></td>
</tr>
</div>
<tr>
<td><p>Carrier Account No.:</p></td>
<td><p>
<label for="carrierAcc"></label>
<input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
</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="6" />
</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>
Sorry for the extra lines in the code, I don’t know how they got there.
Just as an FYI, there is something in my code that is messing up the hidden property. When I isolate the code it works well. I have tried to remove parts of the code to try to determine what is messing things up with no success.
This is really a javascript question (especially as you didn’t show any css anwyay :)).
You can’t however wrap a div around a table-row as that is invalid and won’t work. You need to hide and show the table row instead (although forms aren’t really tabular data and table-free would have been easier.)
Apply the class to the table-row instead of a div as follows.
However, I guess you have some sort of validation script to catch when the select is clicked anyway and then use its value to check whether to open the table-row up.
You need to be careful changing the class on an element without checking whether the element has multiple classes or not as you could inadvertently delete a class that was needed.
If you need further help I’ll move this to the JS forum for better advice.
Thanks Paul. The <tr> is hidden now but the JavaScript is not triggering it to reappear when the “other” option is selected. I will appreciate it if you could move this post to the JS forum. Maybe they could help me with the JavaScript there.
Did you include the JS you were using to trigger the showing of the extra content?
If you post the full script then I’ll move this to the JS forum. (Using the temporary onclick method I showed above shows that it will work if implemented correctly).
I’ll move it to the JS forum now as your onchange event is all wrong as you don’t have an id to work with and you aren’t detecting which option element was changed. If you add my onclick code to the option element you will see that it is working but obviously is not the best way to do this.
I gave you the answer in my other post with those css classes.
When you hide it with display:none you must show it with display:table-row not display:block otherwise you change it to a block element and is no longer a table-row.
