Menu
Appreciate any help on how I can finish this project:
Basically one select box needs to appear at the same time that another disappears. Help with syntax would be appreciated as well:
1- When “auto” is selected under “Select your move type”, the Vehicle section should appear. (THIS WORKS now)
2- This event above should also hide the “Residence type” select element
3- The vehicle element should move up and take up the spot where residence type was.
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Centered Element of unknown height and width</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript”>
function hide(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = ‘hidden’;
}
function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = ‘visible’;
}
function show_auto(optionValue)
{
if(optionValue==’auto’){show(‘vehicle’);}else{hide(‘vehicle’);}
}
function hide_residence(optionValue)
{
if(optionValue==’vehicle’){hide(‘residence_type’);}else{show(‘residence_type’);}
}
document.getElementById(‘residence_type’).style.display = ‘none’; // to hide
document.getElementById(‘num_rooms’).style.display = ‘none’; // display: block (to show)
</script>
</head>
<body onload=hide(‘vehicle’);>
<div id=”xouter”>
<div id=”xcontainer”>
<div id=”xinner”>
<div class=”start_quotes”>Start getting your free moving quotes</div>
<div id=”wrapper_form”>
<div id=”arrow”><img src=”Fireworks_image/arrow.gif” /></div>
<form action=”#” id=”main_form”>
<div id=”move_type_id” class=”formItem”>
<label for=”move_type”>Select Your Move Type<br />
<select id=”move_type” name=”move_type” onchange=”show_auto(this.value)”>
<option value=””>Select</option>
<option value=”full”>Full</option>
<option value=”self”>Self</option>
<option value=”auto”>Auto</option>
</select>
</label>
<div class=”which_is_right”><a href=”#”>Which is right for me?</a></div>
</div>
<div class=”formItem” style=”clear:left;”>
<label for=”moving_from” id=”moving_from”>Move Date <span class=”approximate”>(approximate)</span><br />
<input type=”text” name=”move_date_month” size=”12″ maxlength=”10″ value=”Month” style=”display:inline-block;float:left; margin-right:6px;” />
<input type=”text” name=”move_date_day” size=”3″ maxlength=”2″ value=”Day” />
</label>
</div>
<div class=”formItem” style=”clear:left;”>
<label for=”moving_from” class=”moving_from”>Moving From<br />
<input type=”text” name=”Moving_From” size=”12″ maxlength=”5″ value=”Zipcode” style=”display:inline-block;float:left;”/>
</label>
</div>
<div class=”formItem” style=”margin-left:6px;”>
<label for=”moving_to” class=”moving_to”>Moving to<br />
<input type=”text” name=”Moving_To” size=”12″ maxlength=”5″ value=”Zipcode” />
</label>
</div>
<div style=”width:150px; margin-left:10px; padding-top:5px;”>
<div class=”zipcode_finder” style=”float:left; height:14px; padding-top:2px;”><a href=””>Zipcode Finder</a></div><div class=”zipcode_finder” style=”float:left; height:14px; padding-top:2px; margin-left:19px;”><a href=””>Zipcode Finder</a></div>
</div>
<div style=”clear:both;”></div>
<div id=”residence_type” class=”formItem”>
<label for=”residence_type”>Residence type<br />
<select name=”residence_type” id=”residence_Type” />
<option value=”select” selected=”selected” class=”select”>Select</option>
<option>Apartment</option>
<option value=”year”>Condo</option>
<option value=”year”>Single Family</option>
</select>
</label>
</div>
<div id=”num_rooms” class=”formItem” style=”margin-left:6px;”>
<label for=”num_rooms”># of Rooms<br />
<select name=”num_rooms” id=”num_rooms_sel” />
<option value=”Select” selected=”selected” class=”select”>Select</option>
<option value=”one”>1</option>
<option value=”two”>2</option>
<option value=”three”>3</option>
</select>
</label>
</div>
<div id=”vehicle” class=”formItem”>
<label for=”vehicle”> Vehicle<br />
<select name=”year” id=”year” />
<option>Year</option>
<option value=”year”>year</option>
</select>
<select name=”make” id=”make” />
<option>Make</option>
<option value=”make”>make</option>
</select>
<select name=”model” id=”model” />
<option>Model</option>
<option value=”model”>model</option>
</select>
</label>
</div>
<div class=”continue_button”> <a href=”javascript:document.myform.submit()”
onmouseover=”document.myform.sub_but.src=’Fireworks_image/btn_continue_s1.gif'”
onmouseout=”document.myform.sub_but.src=’Fireworks_image/btn_continue_s1.gif'”
onclick=”return val_form_this_page()”> <img src=”Fireworks_image/btn_continue_s1.gif” border=”0″ alt=”Submit this form”
name=”sub_but” align=”left” /> </a> </div>
</form>
<div id=”the_difference_box”>
<div class=”the_difference”>The Difference</div>
<div class=”safety”><strong>Safety</strong> – Our network consists of only fully licensed and insured movers.</div>
<div class=”quality”><strong>Quality</strong> – All our moving companies must pass our strict 28-point inspection process to insure quality service.</div>
<div class=”security”><strong>Security</strong> – GigaMoves does not permit moving companies to broker or sell customer information.</div>
<div class=”privacy”><a href=”#”>Privacy Policy</a></div>
</div>
<!– end wrapper_form –>
</div>
</div>
</div>
</div>
</body>
</html>