Page 1 of 1

Help with showing a form if drop-down value = "Other"

Posted: Sun Nov 13, 2011 1:19 pm
by mikeashfield
Hey, I'm current creating a system in PHP that I want to be able to add orders to the system, and the person processing it will select the customer from a drop down, if the customer does not already exist I would love for there to be an "Other..." option in the drop-down (at the bottom) if the customer isn't in the clients table in the database that will show a hidden form that will allow a client to be added at the same time as order. I would also like a second hidden from to be shown at the same time to allow the person processing the order to add the clients product (for repair) as it will not have a product for the client if the client does not exist. But if they do select a client, then it should search the database table products client_id field for a list of their products and display this in a drop down.

How can I do this? Thanks.

Re: Help with showing a form if drop-down value = "Other"

Posted: Mon Nov 14, 2011 4:51 am
by social_experiment
AJAX is a good option (not sure about any other technologies). I'll explain at the hand of ajax example i use; Pass a variable using $_GET which is retrieved by the page it is passed to and based on the result, you display / create your other content.

Re: Help with showing a form if drop-down value = "Other"

Posted: Mon Nov 14, 2011 5:24 am
by twinedev
For the "selecting other issue":

on the <select> add a onclick="toggleOther(this)"

On the text input, start it out with a style of display: none
Also, the second form (will needs to be the same form, but going with your wording), which will probably be just another <fieldset> that is also defaulted to a style of display=none;

now in the function toggleOther(elem) you would do something like the following:

Code: Select all

if  elem.value == "(your value for <option>Other)" {
    document.elementGetById("id on the Other text input").style.display = "block";
    document.elementGetById("id on the fieldset for 'second' form").style.display = "block";
}
else {
    document.elementGetById("id on the Other text input").style.display = "none";
    document.elementGetById("id on the fieldset for 'second' form").style.display = "none";
}
Ok,. since it is in the PHP code second, a reminder here that when processing the form, if they don't select "Other", skip over all the inputs that you are toggling

And the actual JS code, need to test to make sure I typed it correctly off the top of my head... But that should be enough that you can get started and things to look up if you don't understand them (or ask here).