PDA

View Full Version : Showing & hiding form elements simultaneously



webgirrrl1
11-15-2010, 08:20 AM
I'm a total n00b, but I managed to get halfway with getting this to work. The problem is showing and hiding two elements on a form at the same time.

What needs to happen (see attached file):

1- When "auto" is selected under "Select your move type", the Vehicle section should appear. (this works)

2- This event above should also hide the "Residence type" select element

3- Then the "vehicle" part should move up and take up the spot where "Residence type" was.

See attached file.
I need all the help I can get!!
Thanks in advance. Any help would be so appreciated! :)

webgirrrl1
11-15-2010, 05:09 PM
<!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" />
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="iecss_DELETE.css" rel="stylesheet" type="text/css" />
<![endif]-->

<style type="text/css">
/* zero out margins */
* {
margin:0;
padding:0
}
/* mac hide \*/
html, body {
height:100%;
width:100%;
}
/* end hide */

body {
text-align:center;
min-height:300px;/* for ie7*/
font-family:Arial, Helvetica, sans-serif;
font-size:.85em;
}
#xouter {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#xcontainer {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 300px;
}
#xinner {
width: 453px;
background:#fff;
height: 300px;
text-align: left;
margin-left:auto;
margin-right:auto;
background: url(web_developer_test_blank.jpg) no-repeat center;
}
/* not required for demo */
p, h1 {
margin-bottom:1em
}
#header {
margin-right:0
}
.maintxt {
text-align:left;
margin:1em;
}
.formItem {
height:42px;
float:left;
}
.em1 {
font-size:1em;
}
.em95 {
font-size:.95em;
}
.em9 {
font-size:.9em;
}
.em85 {
font-size:.85em;
}
.em8 {
font-size:.8em;
}
.em75 {
font-size:.75em;
}
.select {
font-style:italic;
}
.start_quotes {
font-style:italic;
font-weight:bold;
color:#6a8da9;
font-size:1.35em;
text-align: left;
margin-left: 25px;
margin-top: 15px;
float:left;
position:relative;
width:100%;
}
#the_difference_box {
float:right;
width:165px;
text-align: left;
border: 1px solid #d5e2ea;
margin-top: -55px;
line-height: 1.1em;
font-family: Arial, Helvetica, sans-serif;
color:#383838;
background-color: #fff;
padding: 8px 10px 15px 12px;
margin-right: 15px;
height: 212px;
}
.the_difference {
font-size:1em;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#666;
margin-top:2px;
}
.safety, .quality, .security, .privacy, zipcode_finder {
margin-bottom:8px;
font-size: .8em;
}
.safety {
margin-top:5px;
}
.security {
margin-bottom:3px;
}
.which_is_right, .zipcode_finder {
font-size: 0.75em;
float: right;
margin-left: -10px;
}
.which_is_right, .privacy {
color:#2b5774;
text-decoration:underline;
margin: 0;
}
a:link, a:visited, a:active {
color:#2b5774;
}
#wrapper_form {
width:453px;
float: left;
}
#main_form {
width:220px;
float:left;
padding-left: 25px;
height: 238px;
padding-top: 8px;
margin-top: -66px;
}
input {
color: #999;
background: #fff;
border: 1px solid #06c;
border-color: #06C;
font-style: italic;
height:20px;
}
.approximate {
color: #777;
font-size: 0.85em;
}
.submit input {
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
select {
color: #999;
border: 1px solid #666699;
}
label {
color:#444;
font-size:.85em;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.continue_button {
float:left;
position:relative;
}
#arrow {
position:relative;
top:-17px; /* -18 for gecko */
left:-27px;
width: 28px;
height: 66px;
}
#move_type {
width:100px;
}
#move_type_id {
width:220px;
}
#year, #make, #model {
width:70px;
}
#residence_Type {
width:100px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#xouter{display:block}
#xcontainer{top:50%;display:block}
#xinner{top:-50%;position:relative}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->

<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> &ndash; Our network consists of only fully licensed and insured movers.</div>
<div class="quality"><strong>Quality</strong> &ndash; All our moving companies must pass our strict 28-point inspection process to insure quality service.</div>
<div class="security"><strong>Security</strong> &ndash; 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>