Click to See Complete Forum and Search --> : Hiding/unhiding Drop down boxes


SmellyKat
07-04-2005, 01:26 PM
Hello,

This is my first post on this site. I have spent the last few hours going through the JavaScript postings looking for the problem that I am having. Some were close and I tried to emulate them with not much success.

I am writing a form that needs to have a drop down box when selected and will unhide/hide two different dropdown boxes (depending on what is selected). if the user selects Closed then a drop down box will appear giving a the user a selection of who closed it. If the user selects Re-Assign from the first drop down box then a different drop down box will appear.

The problems I am having are as follows:

1) I have no idea what I am doing. I code normally in C# and JAVA I do not like HTML or JavaScript much but here I am stuck with this project. The form is initially done in PHP so bear with coding. ( When I do get a working model I do plan on refactoring)

2) Hiding the drop down boxes
a) it took a while but I finally got them hidden (I think) they do not show up on the webpage.

3) I cannot seem to get the the JavaScript correct to toggle the drop down boxes from hidden to visible.
a) I want this done on the fly if possible.

4) the page is quite lengthy so I wont waste your time showing the entire page just the form name, JavaScript, and Drop down boxes.

5) The page runs however when I select either closed by or Re-Assign I get the following error

OBJECT DOES NOT SUPPORT THIS ACTION

I am sure I am going to hit my head on the wall(or desk) when the answer is shown to me, but I am stuck and your website seems friendly and easy to understand unlike others that I have posted to.

Thank you in advance if you can help me.

If you need to see the entire page I can do that as well.


function selection()
{
if (document.close.status4.selectedIndex == 'Closed')
{
document.all.sel1.style.visiblity = "visible";
document.all.sel2.style.visiblity = "hidden";
}
else if (document.close.status4.selectedIndex == 'Re-Assign')
{
document.all.sel2.style.visiblity = "visible";
document.all.sel1.style.visiblity = "hidden";
}
else
{
document.all.sel1.style.visiblity = "hidden";
document.all.sel2.style.visiblity = "hidden";
}

<form name="close" method="POST" action="update.php" onSubmit="return Validate()">

<tr>
<td align="right"><strong>Change Status To:</strong></td>
<td align="left">
<select name="status4" style="WIDTH: 125px" onChange="selection()">
<option value="" selected=""></option>
<option value="Closed">Closed</option>
<option value="Re-Assign">Re-Assign</option>
</select></td>
</tr>


<?php
//Closed by
echo "<div id=\"sel1\" STYLE=\"position:absolute; visibility:hidden;\">";
echo "<table>";
include("sql_logon.inc");
echo "<td align=\"right\"><strong>Closed By:</strong></td>";
$query2 = "SELECT user FROM users ORDER BY user_id";
$result2 = mysql_query($query2);

echo "<td><select name=\"closed_by4\" style=\"WIDTH: 125px\">";
echo "<option value=\"\" selected=\"\"></option>";

while($row = mysql_fetch_array($result2))
{
$user = $row['user'];
echo "<OPTION value=\"$user\">$user</option>";
}
echo "</select></td></div>";

//Re-Assigned to
echo "<div id=\"sel2\" STYLE=\"position:absolute; visibility:hidden;\">";
include("sql_logon.inc");
echo "<td align=\"right\"><strong>Re-assigned to:</strong></td>";
$query2 = "SELECT user FROM users ORDER BY user_id";
$result2 = mysql_query($query2);

echo "<td><select name=\"reassigned_to4\" style=\"WIDTH: 125px\">";
echo "<option value=\"\" selected=\"\"></option>";

while($row = mysql_fetch_array($result2))
{
$user = $row['user'];
echo "<OPTION value=\"$user\">$user</option>";
}
echo "</select></td></tr></table></div>";
?>

phpnovice
07-04-2005, 02:27 PM
All of these references are wrong:

style.visiblity

They should be this:

style.visibility

SmellyKat
07-04-2005, 03:12 PM
AARRGG ok I fixed that issue.

I still get the same error however

phpnovice
07-04-2005, 03:27 PM
Which line?

SmellyKat
07-04-2005, 04:14 PM
Not sure I have a bunch of PHP code and Java Script in front of this function.

It is entering the function that I'm sure of. I put an alert box in the function just to make sure I was entering it.

It seems to choke on the first

document.all.sel1.style.visibility = "visible";

phpnovice
07-04-2005, 04:27 PM
With which browser and version are you testing?

SmellyKat
07-04-2005, 04:36 PM
OK I lied (not on purpose).

I put my alert box back into myu function (before the if statement) and it never touches the code.

It was entering earlier when I tested it but now its not. I have made very few changes but it seema I have messed it up.

Currently I am working with IE 6 with the latest patches installed. when I get this working I will try to port to Mozzilla. but for now I just want a working model.

When I select a different option from the drop box it then gives me the error:

OBJECT DOESN'T SUPPORT THIS ACTION

is there a different way to call this function? The onChange is what I have read about and I have seem examples on the internet and books.

Is it possible that I am calling the function incorrectly?

phpnovice
07-04-2005, 04:39 PM
Can you supply a live link to the page? If so, I can run it through my JavaScript Debugger and find out exactly what is causing the problem.

SmellyKat
07-04-2005, 04:44 PM
No I cant its on my laptop sorry

i can however email you the page if nessesary

I really appreciate your help and quick responses

does the code look ok? other then the typo no obvious syntax errors?

phpnovice
07-04-2005, 04:52 PM
You can zip it up and attach it here. Thing is, I'd want only what is rendered in the browser -- no PHP code.

SmellyKat
07-04-2005, 04:55 PM
OK i figured out one thing

I am getting into my function i had to closed the browser and reopen it (I guess that refreshing it does not always work).

OK i replaced this line:

if (document.close.status4.selectedIndex == 'Closed')


with this line:

if (document.close.status4.value == 'Closed')

this now enables the boxes to appear. However it is enableing both boxes to appear not just the one I want.

SmellyKat
07-04-2005, 05:00 PM
IS "hidden" the correct word to use?

I cannot seem to find an example.

phpnovice
07-04-2005, 05:03 PM
hidden/visible goes with visibility
block/inline/none goes with display

This:

if (document.close.status4.selectedIndex == 'Closed')

should be this (for cross-browser compatibility):

sel = document.close.status4;
if (sel.options[sel.selectedIndex].value == 'Closed')

SmellyKat
07-04-2005, 05:19 PM
Very Good I like that. Very easy to understand.

Thank you.

Now I have to figure out why it is showing me both drop boxes instead of just the one I want. It does not like the Hidden I believe.

im confused on this. hmmm......

ok I messed around a bit more

It seems to work just fine when I select the Closed option:

(except that both drop down boxes are showing)

If I reselect the blank option everything disappears

so that it working .

However

It seems to ignore the Re-Assign option completely


I viewd the source as it has to be the way I have my <div> tags configured.

I have both of them in one table. do I have to separate them into different tables?

I cant say I truly understand the <div></div> tags .

SmellyKat
07-04-2005, 05:35 PM
Yep that seemed to be it

It has to be in it's own table

Sweet.

It now shows only want I want.

this is the final code and it works great :)

function select()
{
sel = document.close.status4;
if (sel.options[sel.selectedIndex].value == 'Closed')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel1.style.visibility = "visible";
}
else if (sel.options[sel.selectedIndex].value == 'Re-Assign')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel2.style.visibility = "visible";
}
else
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
}
}

Now all I have to do is position it where I want it :D

I knew it would be simple

I worship the code you give _/--\o_ :D

Thank you for all your help. :)

phpnovice
07-04-2005, 05:46 PM
Cheers.

g0alieb0y
07-04-2005, 05:51 PM
Yep that seemed to be it

It has to be in it's own table

Sweet.

It now shows only want I want.

this is the final code and it works great :)

function select()
{
sel = document.close.status4;
if (sel.options[sel.selectedIndex].value == 'Closed')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel1.style.visibility = "visible";
}
else if (sel.options[sel.selectedIndex].value == 'Re-Assign')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel2.style.visibility = "visible";
}
else
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
}
}

Now all I have to do is position it where I want it :D

I knew it would be simple

I worship the code you give _/--\o_ :D

Thank you for all your help. :)
hey can i have a link to your site? i want to see it in action :D

SmellyKat
07-04-2005, 06:30 PM
The site is on my laptop

but here is the complete code if you want it (Without any PHP tags)


//select funtion
// I had to hide both drop down boxes before I showed the visible one
// otherwise it would not erase the previos box thus starting with a clean
// page

function select()
{
sel = document.close.status;
if (sel.options[sel.selectedIndex].value == 'Closed')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel1.style.visibility = "visible";
}
else if (sel.options[sel.selectedIndex].value == 'Re-Assign')
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
sel2.style.visibility = "visible";
}
else
{
sel1.style.visibility = "hidden";
sel2.style.visibility = "hidden";
}
}

// First drop down box change status
<tr>
<td align="right"><strong>Change Status To:</strong></td>
<td align="left">
<select name="status" style="WIDTH: 125px" onChange="select()">
<option value="" selected=""></option>
<option value="Closed">Closed</option>
<option value="Re-Assign">Re-Assign</option>
</select>
</td>
</tr>


//First selection of closed by drop down box

<div id="sel1" STYLE="position:absolute; top: 348px; right: 215px; visibility:hidden;">
<table><tr>
<td align="right"><strong>Closed By:</strong></td>
<td><select name="closed_by" style="WIDTH: 125px">
<option value="" selected=""></option>
<OPTION value="dude">dude</option>
<OPTION value="dude1">dude1</option>
<OPTION value="dude2">dude2</option>
<OPTION value="dude3">dude3</option>
</select></td></tr></table></div>


//second selection of drop down box

<div id="sel2" STYLE="position:absolute; top: 348px; right: 215px;visibility:hidden;">
<table><tr>
<td align="right"><strong>Re-assigned to:</strong></td>
<td><select name="reassigned_to" style="WIDTH: 125px">
<option value="" selected=""></option>
<OPTION value="dude">dude</option>
<OPTION value="dude1">dude1</option>
<OPTION value="dude2">dude2</option>
<OPTION value="dude3">dude3</option>
</select></td></tr></table></div>

I certainly hope this helps all those who need it.