Forum Moderators: coopster

Message Too Old, No Replies

How to show different form fields depending on selection from dropdown

         

Beano

8:13 pm on Oct 3, 2011 (gmt 0)

10+ Year Member



Hi everyone, just looking for a solution as I don't seem to be getting anywhere.

I'm looking for a PHP/Javascript code that'll mean that different fields are visible upon selection of an option from a dropdown list.

The page I am wanting to include this on is a PHP form which currently has the form fields set up in this example:


$form->field('select', $lng['user']['Type'], 'Type', fetchArray('accounttype'), $formSubmit['Type']);

$form->field('text', $lng['user']['FirstName'], 'FirstName', $formSubmit['FirstName'], '', '', true, '25', '255');

$form->field('text', $lng['user']['LastName'], 'LastName', $formSubmit['LastName'], '', '', true, '25', '255');

$form->field('htmltextarea', $lng['user' ['Description'], 'Description', $formSubmit['Description'], '', 'Description', false, '', $cnf['account_description_size']);

$form->field('textarea', $lng['user']['KeywordsForm'], 'Keywords', $formSubmit['Keywords'], '', 'Keywords', false, 2, $cnf['keywords_size']);

$form->legend($lng['user']['label']['ContactDetails'], '');


So essentially, I'd like only a couple of the form fields to appear upon selection of a field in the drop down menu.

I hope this makes sense, any help is greatly appreciated.

Beano

10:34 am on Oct 5, 2011 (gmt 0)

10+ Year Member



Anyone? Help would be greatly appreciated!

coopster

11:06 am on Oct 6, 2011 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



Welcome to WebmasterWorld, Beano.

Sounds like you are describing that after the content is delivered and the visitor is viewing the page they will select an item from a select element. And then you want to show or hide certain elements on the page based on the value of that selection. Is this correct? If so, you can use JavaScript programming to handle this event. If that is not an option you will need to ask the user to submit the form first and then use PHP to determine what the selection value was in order to recondition the page output and format.

Beano

11:31 am on Oct 6, 2011 (gmt 0)

10+ Year Member



Hi Coopster, thank you for the response!

Basically, the page loads up with all of the fields (some are listed above) but what I'd like to do is just start with the dropdown menu on the page where they will then select an option, which in turn brings up the appropriate fields for that selection. I think it would be a case of using jQuery, but unfortunately I can't seem to get the code to run within the php and it throws it all off design.

I'm a bit of a novice for all this to be fair, although I can pick things up with ease, I just seem grounded on this one! :(

coopster

11:35 am on Oct 6, 2011 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



You have a couple of options ...

The first is to load the page with all possible selection options and data. You have a default selection or none at all like a "Select one please ..." and you show/hide the other form elements based on that initial value and then every time that value is changed by the visitor selecting a different option.

Another option is to show just the selection element and upon initial display you force the user to choose an option and submit it whereupon you make a round trip to the server to get the next batch of information or selections based on the form submission.

There is a hybrid option using AJAX which makes the round trip automatically each time the selection is changed.

Beano

12:37 pm on Oct 6, 2011 (gmt 0)

10+ Year Member



Thanks coopster,

Which variation would you recommend?

coopster

1:23 pm on Oct 14, 2011 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



It really depends on the application, the target user(s) and the amount of data involved. If the dataset is relatively small I would go with the first option. If there is a lot of data involved I would likely set a default and display it. Upon change I would fire off an AJAX request and update the page accordingly. Fair warning: the AJAX effort is much larger and more complex, but once you get the hang of it you will find it quite useful.