Forum Moderators: open

Message Too Old, No Replies

Hiding 4 div changing the value of a dropdown box

         

Lestat01

9:44 am on Mar 25, 2011 (gmt 0)

10+ Year Member



Hi all, i've seen many threads opened here with same argument but still i can't find a solution, trying to use the example that you give.
I'm making a timesheet for my office and i just want to hide 4 divs in case that a colleague signs just to insert his access time in the office.
I explain the structure:
User name
Action (enter - exit)
Confirm button (that writes on the db the time and the day)
Place Selection (Select - Mission) This is the dropdown that must control the following divs because, if the user doesn't selects Mission i don't want that the divs are shown, because they're useless.
Then it ends with
Start Date (calendar)
End Date (calendar)
Start Time (dropdown time)
End time (dropdown time)
Confirm
That's it, the structure is this one and the page is already working, all i need is to add the hide/show option.
I show you the code below, just to let you see how i called the functions.
Thanks in advance for your support


<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Luogo</label>
<select class="cf_inputbox" id="select_3" size="1" title="" name="Luogo">
<option value="">Seleziona</option>
<option value="Missione">Missione</option>

</select>


</div>
<div class="cfclear">&nbsp;</div>
</div>

<?php
$script = "
new Calendar({ date_1: 'd/m/Y', date_2: 'd/m/Y' },
{
direction: 0,
pad: 1,
classes: ['dashboard']
});
";
jimport('joomla.environment.browser');
$browser = JBrowser::getInstance();
if ( $browser->getBrowser() == 'msie' ) {
$loader = 'load';
} else {
$loader = 'domready';
}
$doc =& JFactory::getDocument();
$script = "window.addEvent('$loader', function() { $script });";
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Data Inizio</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="date_1" name="data_inizio" type="text" />

</div>
<div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Data Fine</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="date_2" name="data_fine" type="text" />

</div>
<div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Ora Inizio</label>
<select class="cf_inputbox" id="select_6" size="1" title="" name="Ora_Inizio">
<option value="">Seleziona</option>

//here are the hours//

</select>

</div>
<div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Ora Fine</label>
<select class="cf_inputbox" id="select_5" size="1" title="" name="Ora_Fine">
<option value="">Seleziona</option>

//hours again//

</select>

</div>
<div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
<div class="form_element cf_button">
<input value="Conferma" name="button_5" type="submit" />
</div>
<div class="cfclear">&nbsp;</div>
</div>

That's it
Thank you again

MichaelBluejay

5:29 am on Mar 26, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm not really following you, but you can hide a DIV by setting its "display" property to "none". For example:

<div id=myDiv>Blah blah blah</div>

<a href="#" onclick="document.getElementById('myDiv').style.display='none'>Click to hide the div</a>
<a href="#" onclick="document.getElementById('myDiv').style.display='display'>Click to show the div</a>