Topic awaiting preservation: Drop-down form field - select - new field appears $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8772" title="Pages that link to Topic awaiting preservation: Drop-down form field - select - new field appears" rel="nofollow" >Topic awaiting preservation: Drop-down form field - select - new field appears\$

Author	Thread
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-23-2003 05:43 Hi, I am really needing to find a solution to my problem for a client, and any help would be appreciated. Within a standard form, there is one drop-down form field. From this, there are four diiferent items to select from, but what is required, is on selct of the fourth dropdown item, a new form field will appear directly below the drop-down field. The form field to appear only relates to the fourth drop-down selection. There are actually three form fields (2 dropdowns, 1 textbox) that have to appear on select of the fourth selection of the main dropdown. Please help!!
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-23-2003 14:12 Hi, elvisedge. I'm not the one to provide you with a solution, but I can tell you this can't be done with simple HTML. I'll move this to the DHTML/JavaScript forum for you, where I believe it can be properly addressed.
kuckus Bipolar (III) Inmate From: Berlin (almost) Insane since: Dec 2001	posted 07-23-2003 14:38 Hi there As Wes suggested this will involve a little bit of JavaScript, but not too much. I'd do this by creating a function which is called every time a new entry is selected from the drop-down menu. It will then check if no. 4 is selected and display / hide the additional fields as required. The function could look like this: code: function checkOption() { if (document.forms[0].dropDownMenu.value==4) document.getElementById("additionalFields").style.display = "block"; else document.getElementById("additionalFields").style.display = "none"; } For this to work you'll have to put it into a JavaScript block in the document's <head> and make the following changes to your form code: The <select> tag of your menu needs a "name" attribute and an "onchange" attribute which calls the function, and the <option> tags need "value" attributes containing the numbers 1 to 4 - code: <select name="dropDownMenu" onchange="checkOption();"> <option value="1">....</option> : <option value="4">....</option> </select> And lastly, put a <div id="additionalFields">....</div> around the fields you want to appear when option 4 is selected. Hope this helps (and works!) kuckus /* edit: t-t-typos... */ [This message has been edited by kuckus (edited 07-23-2003).]
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 07-23-2003 18:04 Nice, Kuckus. I was recently thinking about the same thing for a project I am working on. This will be helpful =)
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-24-2003 05:12 THANKS SO MUCH. Works perfectly. Just another thing though - if its possible. Can I change the values of 1,2,3,4 to something specific: eg. General Enquiry, Services Enquiry, Career Enquiry, Make an Appointment It's just that when the form is submitted (via email) the selection comes up as the number - and the recipient could get confused as to what the number represents. I tried changing the values, including the javascript line: if (document.forms[0].dropDownMenu.value==4) if (document.forms[0].dropDownMenu.value==Make an Appointment) ..but of course didnt work. Is a totally different javascript code required - if it's too complicated then thats fine. Thanks.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-24-2003 05:20 Try the line if (document.forms[0].dropDownMenu.value=="Make an Appointment") with value="Make an Appointment".
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-24-2003 07:26 THANKS 'Slime'. Since you all know your stuff so well, I might just ask another question. The three form fields that appear on selection of the fourth item dropdown, initially appear on default load of the page. I would like it if they were 'invisible' on page load. Since on selection of the fitst item in the dropdown, the three fields disappear - I would have thought that because this was the 'default' selection, then the hidden items would stay hidden. Is this possible? Thanks.
kuckus Bipolar (III) Inmate From: Berlin (almost) Insane since: Dec 2001	posted 07-24-2003 09:37 Sure, that's possible as well - just put this line of CSS into the <head> area: code: <style type="text/css"> #additionalFields { display: none; } </style> kuckus
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-24-2003 10:34 Thanks once again. Works perfectly. Probably asking too much but just one more thing. One of the form fields that appears is a text box. I have given it an 'initial value' - being 'Enter Time'. This is so people know that the text box is for that purpose - to enter in their preferred appointment time. However when you click inside the text box, the 'Enter Time' text stays there - and therefore (if not deleted) appears in the submitted recipients email. Is there an eay way, so that when you click your mouse cursor in the textbox, the 'Enter Time' text disappears..? (or at least does not get submitted.) Thanks!!
kuckus Bipolar (III) Inmate From: Berlin (almost) Insane since: Dec 2001	posted 07-24-2003 12:25 No worries - it's good to see that the code is of use to you (and maybe even some others in the long run ). To get the field cleared when it is clicked, I believe that adding this code: onfocus="this.value='';" to the <input> tag should work. kuckus
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-25-2003 03:14 Once again, THANKS VERY MUCH!! Your help is appreciated. Thats the last time I waste time trying to work something out for myself that I really have no idea about.
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-29-2003 08:09 Hi all, All your help has been appreciated, although my client has asked for one last thing - that relates the the dropdown field box. On select of the 4th item on the drop down, the three 'hidden' form fields appear - which is excellent. Although to the left of these three fields I have some plain text in a cell - "Preferred Date & Time". I need for this text to also be 'hidden', and once again, appear on selection of the 4th item within the dropdown (same as with the 3 hidden fields). I would presume this would be done with layers?, however I would not know how to make a layer 'appear' on selection of a specific form field item. (and be hidden on selection of the other items (and on default)) The page itself is centered, so if a layer is used, it cannot be absolute positioned at a specific measurement from the left. Only the once cell (or what is within it) needs to be hidden. Any help would be most appreciated. THANKS
kuckus Bipolar (III) Inmate From: Berlin (almost) Insane since: Dec 2001	posted 07-29-2003 15:45 You should be able to this the same way as you are showing/hiding the input fields - try enclosing the text in the cell with another <div>, but use a different ID this time. After adding this new ID to your CSS declarations ("display: none;" again) you can expand the JavaScript to show and hide both <div>s by repeating the lines you have for the if and else conditions. Just replace "additionalFields" with the new ID: code: if (document.forms[0].dropDownMenu.value==4) { document.getElementById("additionalFields").style.display = "block"; document.getElementById("additionalText").style.display = "block"; } else { ........ } Notice the curly brackets I added; they're needed because you have more than one command in the if/else blocks now.
elvisedge Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2003	posted 07-30-2003 12:11 THANKS very much!!

Topic awaiting preservation: Drop-down form field - select - new field appears\$

Author

Thread

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-23-2003 05:43

Hi,
I am really needing to find a solution to my problem for a client, and any help would be appreciated.

Within a standard form, there is one drop-down form field. From this, there are four diiferent items to select from, but what is required, is on selct of the fourth dropdown item, a new form field will appear directly below the drop-down field. The form field to appear only relates to the fourth drop-down selection.

There are actually three form fields (2 dropdowns, 1 textbox) that have to appear on select of the fourth selection of the main dropdown.

Please help!!

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-23-2003 14:12

Hi, elvisedge.

I'm not the one to provide you with a solution, but I can tell you this can't be done with simple HTML. I'll move this to the DHTML/JavaScript forum for you, where I believe it can be properly addressed.

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted 07-23-2003 14:38

Hi there

As Wes suggested this will involve a little bit of JavaScript, but not too much.

I'd do this by creating a function which is called every time a new entry is selected from the drop-down menu. It will then check if no. 4 is selected and display / hide the additional fields as required.

The function could look like this:

code:

function checkOption() {

    if (document.forms[0].dropDownMenu.value==4)

        document.getElementById("additionalFields").style.display = "block";

    else

        document.getElementById("additionalFields").style.display = "none";

}

For this to work you'll have to put it into a JavaScript block in the document's <head> and make the following changes to your form code:

The <select> tag of your menu needs a "name" attribute and an "onchange" attribute which calls the function, and the <option> tags need "value" attributes containing the numbers 1 to 4 -

code:

<select name="dropDownMenu" onchange="checkOption();">

    <option value="1">....</option>

    :

    <option value="4">....</option>

</select>

And lastly, put a <div id="additionalFields">....</div> around the fields you want to appear when option 4 is selected.

Hope this helps (and works!)

kuckus

/* edit: t-t-typos... */

[This message has been edited by kuckus (edited 07-23-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 07-23-2003 18:04

Nice, Kuckus. I was recently thinking about the same thing for a project I am working on.

This will be helpful =)

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-24-2003 05:12

THANKS SO MUCH.
Works perfectly.

Just another thing though - if its possible.
Can I change the values of 1,2,3,4 to something specific:

eg. General Enquiry, Services Enquiry, Career Enquiry, Make an Appointment

It's just that when the form is submitted (via email) the selection comes up as the number - and the recipient could get confused as to what the number represents.

I tried changing the values, including the javascript line:

if (document.forms[0].dropDownMenu.value==4)
if (document.forms[0].dropDownMenu.value==Make an Appointment)

..but of course didnt work. Is a totally different javascript code required - if it's too complicated then thats fine.

Thanks.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-24-2003 05:20

Try the line

if (document.forms[0].dropDownMenu.value=="Make an Appointment")

with value="Make an Appointment".

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-24-2003 07:26

THANKS 'Slime'.

Since you all know your stuff so well, I might just ask another question.

The three form fields that appear on selection of the fourth item dropdown, initially appear on default load of the page.

I would like it if they were 'invisible' on page load.

Since on selection of the fitst item in the dropdown, the three fields disappear - I would have thought that because this was the 'default' selection, then the hidden items would stay hidden.

Is this possible? Thanks.

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted 07-24-2003 09:37

Sure, that's possible as well - just put this line of CSS into the <head> area:

code:

<style type="text/css">

    #additionalFields { display: none; }

</style>

kuckus

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-24-2003 10:34

Thanks once again. Works perfectly.

Probably asking too much but just one more thing.
One of the form fields that appears is a text box. I have given it an 'initial value' - being 'Enter Time'. This is so people know that the text box is for that purpose - to enter in their preferred appointment time. However when you click inside the text box, the 'Enter Time' text stays there - and therefore (if not deleted) appears in the submitted recipients email.

Is there an eay way, so that when you click your mouse cursor in the textbox, the 'Enter Time' text disappears..?

(or at least does not get submitted.)

Thanks!!

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted 07-24-2003 12:25

No worries - it's good to see that the code is of use to you (and maybe even some others in the long run ).

To get the field cleared when it is clicked, I believe that adding this

code:

onfocus="this.value='';"

to the <input> tag should work.

kuckus

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-25-2003 03:14

Once again,
THANKS VERY MUCH!!

Your help is appreciated.
Thats the last time I waste time trying to work something out for myself that I really have no idea about.

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-29-2003 08:09

Hi all,
All your help has been appreciated, although my client has asked for one last thing - that relates the the dropdown field box.

On select of the 4th item on the drop down, the three 'hidden' form fields appear - which is excellent. Although to the left of these three fields I have some plain text in a cell - "Preferred Date & Time". I need for this text to also be 'hidden', and once again, appear on selection of the 4th item within the dropdown (same as with the 3 hidden fields).

I would presume this would be done with layers?, however I would not know how to make a layer 'appear' on selection of a specific form field item.
(and be hidden on selection of the other items (and on default))

The page itself is centered, so if a layer is used, it cannot be absolute positioned at a specific measurement from the left. Only the once cell (or what is within it) needs to be hidden.

Any help would be most appreciated.
THANKS

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted 07-29-2003 15:45

You should be able to this the same way as you are showing/hiding the input fields - try enclosing the text in the cell with another <div>, but use a different ID this time. After adding this new ID to your CSS declarations ("display: none;" again) you can expand the JavaScript to show and hide both <div>s by repeating the lines you have for the if and else conditions. Just replace "additionalFields" with the new ID:

code:

if (document.forms[0].dropDownMenu.value==4) {

        document.getElementById("additionalFields").style.display = "block";

        document.getElementById("additionalText").style.display = "block";

}

else {

         ........

}

Notice the curly brackets I added; they're needed because you have more than one command in the if/else blocks now.

elvisedge
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2003

posted 07-30-2003 12:11

THANKS very much!!