Jump to content


Corporate Sponsors


Latest News: (loading..)

* * * * * 3 votes

How to create a drop down selection menu


58 replies to this topic

#1 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 08 August 2009, 11:29

People often ask how to create a drop down selection menu for some item, they often seem to struggle coming up with some weird coding or attempt with pure html.

osC includes a function tep_draw_pull_down_menu which I will use, this removes much of the coding but requires a correctly formatted multi-dimensional
array, this is the achilles heel for many, preventing them using the function.

The parameters for tep_draw_pull_down_menu are ($name, $values, $default = '', $parameters = '', $required = false)

$name is the id for the field
$values is the array containing the selection data
$default is the default value selected
$parameters optional styling params
$required adds the defined TEXT_FIELD_REQUIRED text if true

For this example I will use code I created for a links categories pull down menu for my reciprocal links contrib.


Step one: create array & put default values

//category drop-down
  $category_array = array();
  $category_array[0] = array('id' => '0', 'text' => 'Please Select');

Step two: read data from dBASE for use in array

$category_query = tep_db_query("select category_id, category_name from links_categories where status = 1 order by sort_order, category_name");

Step three: loop through the data, placing it into the selection array ($category_array)

 while ($category_values = tep_db_fetch_array($category_query)) {
	$category_array[] = array('id' => $category_values['category_id'], 'text' => $category_values['category_name']);
	   }

Note the use of 'id' & 'text', 'id' contains the values returned on selection, 'text' is what's displayed by the drop down (these can be the same).
Remember this array has its own index, it is not indexed by 'id'.

Step Four: Output the drop down!!

<td align="right" width="100%"><?php echo tep_draw_form('category', tep_href_link('links.php', 'action=catsel'), 'get').'Links Category: ' . 
tep_draw_pull_down_menu('select_category', $category_array, $selected_cat, 'onchange="this.form.submit();" rel="nofollow"'); ?>
<noscript><input title="View" name="" type="submit" value="Go" /></noscript></form></td>

In this case the drop down is within its own form (drop_downs must always be part of a form), if you are using this as part of a bigger form you can
remove the form elements.

Note the use of tep_href_link in the form action, this is critical.

Links Category: is the displayed text adjacent the drop.
'select_category' is the field id.
$category_array we created above.
$selected_cat has the currently selected category (so that shows pre-selected in the drop (the default))
'onchange="this.form.submit();"' a parameter, in this case a bit of JavaScript to accept input as soon as change made (just an option).
rel="nofollow" often useful to prevent issues with google (duplicate content) this will prevent validation though, use a canonical tag if that's an
issue (just an option).
<noscript><input title="View" name="" type="submit" value="Go" /></noscript> provide a submit button if scripts are off (just an option)

Finally you must process the data at the receiving page, IE

$selected_cat = ($_GET['select_category'] > 0 ? $_GET['select_category'] : false);

this can be the same page if that's where your form action points.

ADVANCED OPTIONS

You may wish to access the data in the selection array separately, this will be an issue as the array has its own index, so placing the same data in a second
array at the same time you create the selection array is the answer, IE within the while loop add:

$categories[$category_values['category_id']] = $category_values['category_name'];

You can now get any category by its id with
echo $categories[$id];

I think I`ve covered it all there, no doubt issue will arrise though.

Edited by spooks, 08 August 2009, 11:40.

Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#2 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 08 August 2009, 13:28

You can set up the select array by hard coding the data, eg:

$select_array[] = array('id' => ' ', 'text' => 'No Change');
$select_array[] = array('id' => '0', 'text' => 'Set All Inactive');
$select_array[] = array('id' => '1', 'text' => 'Set All Active');

or with a for/next loop

$days=array();
$days[] = array('id' => '00', 'text' => 'select');
for($i=1; $i<=31; $i++){
if(strlen($i)!= 2){
$j = '0' . $i;
} else {
$j = $i;
} 
$days[] = array('id' => $j, 'text' => $j); }

Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#3 rocdy

  • Community Member
  • 152 posts
  • Real Name:Rocdy Dewanto
  • Gender:Male
  • Location:Jakarta

Posted 10 August 2009, 08:24

Woow ..... :thumbsup: :thumbsup: :thumbsup: This is great way to do Drop Down menu. Thanks for this explanation. Sorry for my bad English..... :lol:

Edited by rocdy, 10 August 2009, 08:30.

Rocdy

Beginner in php programming and still learning from this forums.
Special thanks for Oscommerce Community Forums that help me a lot. :-)

#4 webman2015

  • Community Member
  • 38 posts
  • Real Name:Troy

Posted 10 August 2009, 15:23

Thank you very much!!

This greatly helps and answers one of my own questions posted a week ago.

You may have just saved my job :D

#5 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 25 August 2009, 16:48

How to add a attribute drop down to product listing

This came up, so this is my method:

In includes/modules/ product_listing.php:

find:

case 'PRODUCT_LIST_BUY_NOW':
		$lc_text = TABLE_HEADING_BUY_NOW;
		$lc_align = 'center';
		break;

replace with:

case 'PRODUCT_LIST_BUY_NOW':
		$lc_text = 'Product Options</td><td align="center" class="productListing-heading">' . TABLE_HEADING_BUY_NOW;
		$lc_align = 'center';
		break;

find:

 case 'PRODUCT_LIST_BUY_NOW':
			$lc_align = 'center';
			$lc_text = '<a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']) . '">' . tep_image_button('button_buy_now.gif', IMAGE_BUTTON_BUY_NOW) . '</a>&nbsp;';
			break;

replace with:

case 'PRODUCT_LIST_BUY_NOW':
								$atrib_drop = '';
		$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_ATTRIBUTES . " where products_id='" . (int)$listing['products_id'] . "'");
	$products_attributes = tep_db_fetch_array($products_attributes_query);
	if ($products_attributes['total'] > 0) {
		
		$atrib_drop = '<table border="0" cellspacing="0" cellpadding="2">';
		
		$products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$listing['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
	  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
		$products_options_array = array();
		$products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$listing['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
		while ($products_options = tep_db_fetch_array($products_options_query)) {
		  $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
		  if ($products_options['options_values_price'] != '0') {
			$products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
		  }
		}

		if (isset($cart->contents[$_GET['products_id']]['attributes'][$products_options_name['products_options_id']])) {
		  $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
		} else {
		  $selected_attribute = false;
		}
$atrib_drop .= '<tr><td align="left">' . $products_options_name['products_options_name'] . ':' . '</td><td align="left">' . tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute) . '</td></tr>';

	  }
						$atrib_drop .= '</table>';
	}
			$lc_align = 'center';
			$lc_text = tep_draw_form('cart_quantity', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action','products_id')) . 'action=add_product')) . tep_draw_hidden_field('products_id', $listing['products_id']) . $atrib_drop . '</td><td align="center" class="productListing-data">' . tep_image_submit('button_buy_now.gif', IMAGE_BUTTON_BUY_NOW) . '&nbsp;</form>';
			break;

Its a bit rough in places, but that should work for most. ;)

Edited by spooks, 25 August 2009, 16:58.

Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#6 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 25 August 2009, 17:20

If you want the add to cart button in place of the buy now, simply replace:

tep_image_submit('button_buy_now.gif', IMAGE_BUTTON_BUY_NOW)

with:

tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART)

Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#7 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 26 August 2009, 12:25

Quote

add attribute drop down to product listing

This option is now built into Product Listing Enhancements, Thumbnails & Manufacturer Headings http://addons.oscommerce.com/info/6051
Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#8 BrainJam

  • Community Member
  • 6 posts
  • Real Name:Dan Porter

Posted 28 August 2009, 20:29

Do you have a live example of this? I'd like to see it working :)

#9 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 28 August 2009, 22:27

View PostBrainJam, on Aug 28 2009, 09:29 PM, said:

Do you have a live example of this? I'd like to see it working :)


This is the standard method used by osC for all pull downs, so to see an example just look at any pull down from a official distribution (ie manufacturers on home page etc).

Please note, often template writers have no clue how this is supposed to work, so pull downs in templates are often severely hacked (and bugged), so ignore them.
Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#10 FIMBLE

  • Community Member
  • 6,567 posts
  • Real Name:Nic
  • Gender:Male

Posted 29 August 2009, 11:16

View Postspooks, on Aug 28 2009, 11:27 PM, said:

Please note, often template writers have no clue how this is supposed to work, so pull downs in templates are often severely hacked (and bugged), so ignore them.

Amen to that !!

Nice post Sam
Nic
Sometimes you're the dog and sometimes the lamp post

My Contributions

#11 catalepticstate

  • Community Member
  • 159 posts
  • Real Name:A M
  • Gender:Male

Posted 23 September 2009, 00:20

This does not seem to work for new_products.php

#12 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 23 September 2009, 10:57

View Postcatalepticstate, on Sep 23 2009, 01:20 AM, said:

This does not seem to work for new_products.php

The method detailed there is the standard one for osC, it will work anywhere, if yours is failing u have made an error.

I suggest u re-read the thread.
Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#13 timmle

  • Community Member
  • 139 posts
  • Real Name:T
  • Gender:Male

Posted 07 October 2009, 12:26

I have been very kindly directed to this topic after not being able to find it and have a few questions.


I have sucesfully entered a text field in the create_account.php page, so it is already part of a form, which allows me to take more information form the customer. It works beautiful, appearing in the admin section and everything. At the moment it is a text field and i am changing it to a drop down using this excellent tutorial.

As i will be having about 10 different drop downs with different values inside, i'm unsure about how i would encorporate that into what i would like.


This post seems to be directed specifically at a category drop down and i don't think i have the skill to modify for a drop down in the create_account.php page.

This is my code from that page.

Quote

<tr>
<td class="main"><b><?php echo PRESCRIPTION; ?></b></td>
</tr>

<tr>
<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
<tr class="infoBoxContents">
<td><table border="0" cellspacing="2" cellpadding="2">
<tr>
<td class="main"><?php echo ENTRY_CUSTOMER_RSPH; ?></td>
<td class="main"><?php echo tep_draw_input_field('rsph', '','maxlength="6"' . 'style="width: 50"') . '&nbsp;' . (tep_not_null(ENTRY_RSPH_TEXT) ? '<span class="inputRequirement">' . ENTRY_RSPH_TEXT . '</span>': ''); ?></td>





</tr>
</table></td>
</tr>
</table></td>
</tr>

All the arrays have been set up using a previous run through, and like i said earlier, eveything seems to run perfectly.

What i would like to display in a drop down is a list of values, off the top of my head roughly 100 values.

How would i use this method to make a list appear like that using tep_draw_pull_down_menu method.

Thankyou.

#14 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 07 October 2009, 13:06

View Posttimmle, on 07 October 2009, 12:26, said:


The category drop down is just an example, just alter the variable names to suit.

The code given is the standard generic code, it is not specific to anything.

I gave an example for creating a list of values. [img]http://forums.oscommerce.com/public/style_emoticons/default/wink.gif[/img]
Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#15 timmle

  • Community Member
  • 139 posts
  • Real Name:T
  • Gender:Male

Posted 07 October 2009, 13:22

Quote

$rsph = tep_db_prepare_input($HTTP_POST_VARS['rsph']);
- That is store the information into the correct field in the mysql database i imagine

Quote

$sql_data_array = array('customers_firstname' => $firstname,
'customers_rsph' => $rsph,
- I believe this is step 1 in your tutorial which has already been done because of the text input field.

Quote

Step two: read data from dBASE for use in array $category_query = tep_db_query("select category_id, category_name from links_categories where status = 1 order by sort_order, category_name");
- This step two, im confused where this fits in with a new field i have created/

Quote

while ($category_values = tep_db_fetch_array($category_query)) {
$category_array[] = array('id' => $category_values['category_id'], 'text' => $category_values['category_name']);
}
- Step 3 i imagine will be exaplined once i understand step 2

and then step 4 the same.

The first two quotes above are all i have added for mysql database interaction and still not sure how the tutorial you have kindly produced fits in with mine, as the previous steps i have taken have been rather simple.

Will i need to make a table in mysql of the values i want to output into the dropdown menus? all i have done so far regarding this is entered a new field in the customer section called customers_rsph which in this 'customers_rsph' => $rsph, has believed connected it to the $rsph command, and then when $rsph = tep_db_prepare_input($HTTP_POST_VARS['rsph']); is used it writes to the database when <?php echo tep_draw_input_field('rsph'...

The only reason i asked about the ouput list is because by the looks of it you are requesting a list from the mysql database, which i have not prepared.

What would be the next step i have to take?

#16 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 07 October 2009, 13:39

View Posttimmle, on 07 October 2009, 13:22, said:



You are making some wildly invalid assuptions, I suggest you follow some basic tutorials to better understand the working of php & sql.


PHP Tuition http://us.php.net/tut.php

SQL Tuition http://www.w3schools.com/sql/default.asp


Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#17 timmle

  • Community Member
  • 139 posts
  • Real Name:T
  • Gender:Male

Posted 07 October 2009, 14:09

Ok im starting to read a few now. As i said in my last post do i need to build a section in the database of a list of values to put in the drop down field?

If that's a crazy presumption, please let me know as its how i understand it.

The tutorials and such are good, but i find it hard to transfer it over to oscommerce.


Output of Drop Down,


[quote]td align="right" width="100%"><?php echo tep_draw_form('category', tep_href_link('links.php', 'action=catsel'), 'get').'Links Category: ' .
tep_draw_pull_down_menu('select_category', $category_array, $selected_cat, 'onchange="this.form.submit();" rel="nofollow"'); ?>
<noscript><input title="View" name="" type="submit" value="Go" /></noscript></form></td>[/quote]


The bit i am looking at i presume is the 'select_category', $category_array, $selected_Cat.

Transferring this into my implementation is slightly confusing, as all i need is one list of things, its seems rather complicated for just that.
The documentation with oscommerce goes over things specifically aimed at beginners who have never approached php and mysql, and although i have learned a little bit of each to get me by, in the documentation it is spelt out quite clearly so never needed to go too advanced yet. From that i built a few presumptions i guess.

Edited by timmle, 07 October 2009, 14:13.


#18 timmle

  • Community Member
  • 139 posts
  • Real Name:T
  • Gender:Male

Posted 07 October 2009, 14:45

Ignore above post.

I'm just gonna start from square one, i need to learn how to do this. Probably be back when i know a bit more about these commands.

One thing to get me started...

Quote

$category_array = array();

the bold $category_array, is that something that is created in oscommerce or a universal command?

#19 spooks

  • Community Member
  • 7,017 posts
  • Real Name:Sam
  • Gender:Male
  • Location:UK

Posted 07 October 2009, 16:11

View Posttimmle, on 07 October 2009, 14:45, said:

Ignore above post.

I'm just gonna start from square one, i need to learn how to do this. Probably be back when i know a bit more about these commands.

One thing to get me started...



the bold $category_array, is that something that is created in oscommerce or a universal command?


Its not a command, its just a variable name, it could be anything, in this case its going to be an array due to the instruction after the =
Sam

Remember, What you think I ment may not be what I thought I ment when I said it.

Contributions:


Auto Backup your Database, Easy way

Multi Images with Fancy Pop-ups, Easy way

Products in columns with multi buy etc etc

Disable any Category or Product, Easy way

Secure & Improve your account pages et al.

#20 ironmon1

  • Community Member
  • 54 posts
  • Real Name:peijun xia

Posted 16 October 2009, 15:16

Personally Im not overkeen on using drop down menu's as search engines can overlook the content in them, adversely affecting your ranking