More of an HTML Drop-Down Question

Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

All Forums

Development Tools

Other Development Tools

More of an HTML Drop-Down Question

Author

Topic

SamC
White Water Yakist

3467 Posts

Posted - 2004-02-16 : 16:06:30

I've got a form page that allows users to select a "text" value from a list. One value can be selected. I think I use

<select NAME="CenterIDSearch" onChange="putf('form1')">


<option VALUE='0' selected> All Centers
<option VALUE='2711'>EMPTY (0)
<option VALUE='1411'>ABC (783)
<option VALUE='1111'>DEF (2187)
<option VALUE='1511'>GHI (1086)
<option VALUE='1311'>JKLM (1197)
<option VALUE='1011'>NOPE (396)
<option VALUE='2811'>QRORST (0)
<option VALUE='2911'>WROXY (0)
<option VALUE='1211'>MOXEY (519)
<option VALUE='1611'>BOXEY (885)
<option VALUE='1711'>ORA (3899)
</select>

This is great, but I want to allow users to enter a new value if it doesn't appear in the list.

The solution to this problem that occurs to me: Add an input text box - aside/above/below to the drop-down list. If the text box is not empty, use the value there, instead of the drop-down.

This solution doesn't seem elegant since it requires two controls to achive a single input value, so I'm chancing a post here to see if anyone has come accross a better method. The right solution just doesn't seem to be in the HTML kit - a single control to select from a list, or key an input value.

There may be a way to CSS - style the dual control so it appears as one, using :focus to make the drop-down list appear or disappear. Maybe there's a 3rd party JavaScript that does something for this problem?

Sam

MichaelP
Jedi Yak

2489 Posts

Posted - 2004-02-16 : 16:54:51

If you want to add stuff to that Drop down box, you can do it one of two ways:

1. Take the user to a screen to input the values, and then return them to the original screen. The drop down will then be repopulated from the database.

2. Populate the drop down on the client side with javascript, and enter that new value into the database upon post. You could use Javascript to un-hide your text boxes, and then hide them again once you are done.

You might want to take a look at http://www.javascripts.com They might have a solution there.

Michael

<Yoda>Use the Search page you must. Find the answer you will.</Yoda>

SamC
White Water Yakist

3467 Posts

Posted - 2004-02-16 : 17:28:01

Thanks Michael, interesting website.

Sam

MichaelP
Jedi Yak

2489 Posts

Posted - 2004-02-16 : 17:46:11

I've done lots of stuff with hiding and un-hiding controls with Javascript. It's been a loooong time since I've added stuff to drop down boxes with Javascript.

With the hiding of controls, you can group the controls into a DIV tag, or do them each separetly (i suggest a DIV or SPAN).
Here's an example in javascript. the control with the id of "hlpUserName" is being set to visible, and the other control is being set to hidden.


hlpUserName.style.display = 'block';
hlpPassword.style.display = 'none';

Let me know if you need more help.

Michael

<Yoda>Use the Search page you must. Find the answer you will.</Yoda>

SamC
White Water Yakist

3467 Posts

Posted - 2004-02-16 : 17:53:54

Hmmm. Looks lite and easy. Since I'm a CSS fan, I'm going to try it out.

I need a JavaScript that'll pop up a confirmation and NOT do the postback if the user selects no/cancel.

Got one?

SamC
White Water Yakist

3467 Posts

Posted - 2004-02-16 : 17:58:06

Another thing. I was looking at a CSS style OVERFLOW that'll allow a table (any element) to scroll in a fixed DIV nicely.

But it isn't clear how to keep the Table header fixed, unless I code it as another table on top of a scrolling table.

Any ideas about that?

MichaelP
Jedi Yak

2489 Posts

Posted - 2004-02-16 : 18:34:40

Sam,
For the popup, you'll need a confim() in javascript. I don't have an example in front of me, but I bet i you put confim and javascript into google, you'll find it.

I've never used the "overflow" thing because I'm not sure how browser compatible it is. As far as other suggestions on how to make it look nice, I'd have to see the page.

Michael

<Yoda>Use the Search page you must. Find the answer you will.</Yoda>

joldham
Wiseass Yak Posting Master

300 Posts

Posted - 2004-02-21 : 20:31:56

Sam,

On the scrolling table, try placing your opening div tab before the second row. I haven't tried this, but something like:


<table>
   <tr>
      <td>Header</td>
      <td>Header 2</td>
   </tr>
<div>
   <tr>
      <td>Datarow</td>
      <td>Datarow Column2</td>
   </tr>
</div>
</table>

Like I said, I am not sure if this will work, but it is worth a try.

SamC
White Water Yakist

3467 Posts

Posted - 2004-02-22 : 00:06:31

Betcha it won't validate.

To make a row disappear

.row-be-gone {display:none;}

<td class="row-be-gone">

mohdowais
Sheikh of Yak Knowledge

1456 Posts

Posted - 2004-02-22 : 02:58:27

There is another CSS attribute which might be of interest to you: VISIBILITY, which accepts values hidden/visible. The difference between display:none and visibility:hidden is the latter will not reclaim space from the hidden element, whereas using display:none causes the browser to re-arrange the neighbouring objects (depending on your layout, of course) to use the newly created space by the disappearing object.

OS

Subscribe to SQLTeam.com

SQLTeam.com Articles via RSS

SQLTeam.com Weblog via RSS

- Advertisement -

Resources