Forum Moderators: open
How is it done?
just a thought...
<style type="text/css">
#container{position:relative;height:18px;}
#select1{position:absolute;}</style>
<script type="text/javascript">
function expandSelect(id, size)
{
var select = document.getElementById(id);
select.size = select.options.length;
}
</script><div id="container">
<select size="1" id="select1" onclick="this.size=1">
<option value="">hello
<option value="">abc
<option value="">234
</select>
</div>
<br>
<button onclick="expandSelect('select1')"> Test </button>
[edited by: Bernard_Marx at 2:25 pm (utc) on May 19, 2007]
I have a script that, when you choose a certain <option> element, more of the form appears. My issue - at first - was that the script relied on inline style set to "display:none;" for the div you wanted to show/hide. This caused end users with javascript turned off to not see the extended form.
I figured out how to get around that by setting the display property for the div to "display:;", but using a body onload event to initially set the div for "display:none;" - this way, end users with javascript turned off would see the entire form (nothing would be hidden), but if you had javascript turned on, then the form would show as collapsed by default (until you clicked the trigger <option> to expand the rest).
Now my issue is this: it's a PHP-based form, and when invalid input is entered, the form is returned with error messages. Problem is, if the end user sent the form fully expanded (filled out everything) and is returned with an error, the form comes back collapsed again. I need to figure out way for the form to check if the input was put in and the form has been returned so it *stays* expanded - but remains collapsed when the page is first loaded.
The script is coded so that, if an error is returned, the field still hold the end user's input (so they don't have to re-enter the whole thing) - so I'm thinking I could use javascript to see if there's input already entered into the first field that shows when it's expanded, and then return the body onload as "display:;" instead of "display:none;". But I don't know how to write such a conditional.
That all being said, here is the code:
showhideID.js
function hide(id) {
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}
}
}function show(id) {
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
}
}
}
The form field (just showing you the section you need to know - cleaned up for ease of seeing what's going on):
<body id="page" onload="hide('services_inquiry');">
...more stuff here that's not necessary...
<div class="form_field">
<?php if ($mailto_error == "1") { echo "<small class=\"error\">You must choose an option for your email type.</small>"; }?>
<span class="fieldname"><span class="required">*</span> Nature of Inquiry:</span>
<select class="form" name="mailto">
<?php if (isset($_POST['mailto'])) echo '<option selected>'.(($_POST['mailto'])).'</option>';?>
<option class="select_option" value=""> ----------------------------</option>
<option value="general" onclick="hide('services_inquiry');">General Information</option>
<option value="services" onclick="show('services_inquiry');">Inquiry for Services</option>
</select>
</div><div id="services_inquiry" style="display:;">
this is the section that expands when the "services_inquiry" option is selected above. By default, this section is hidden when the visitor comes to the page for the first time. The first field I have displayed is for the phone number ($phone).</div>
Now that I've shared that - if someone can tell me how to write a bit of javascript for the onload event that says something like (I could *so* write this in PHP, I just don't know how to convert it to javascript):
if($phone!= ""){
echo '<body id="page" onload="show('services_inquiry');">';
} else {
echo '<body id="page" onload="hide('services_inquiry');">'
}
Of course, the problem with the above is that, if javascript is turned off, it won't display squat. So if I could figure out some kind of javascript so that the "onload" event is just inserted into the already-exisintg <body> tag if javascript is turned on (but no "onload" is inserted if javascript is off), and then display the "show" or "hide" based on whether or not there's already exisintg input in the $phone field.
Now, is there any possible way to do that?
<?php if(($_POST['mailto']) == "services" ) {?>
<body id="page" onload="show('services_inquiry');">
<?php } else {?>
<body id="page" onload="hide('services_inquiry');">
<?php }?>
And that solves the problem. I love PHP.
Hope it helps you out Vince!
