Jump to content
Killersites Forums

Using a dropdown box to display a button


Recommended Posts

This is for all the pro's out there :D

 

I need a way to create a dropdown box, which i know how to do, but then depending of which value is selected, I need it to display a different "add to cart" button.

 

For example, I need a dropdown called "Language" which has values such as "Spanish" "Italian" and "French".

 

Once a user chooses a language, I need the correct "add to cart" button to display.

 

I don't want 11 different "add to cart" buttons, each giving the user the ability to buy the video in their own language, so i'm needing something clean.

 

Any ideas? Is this a php topic, or does this require javascript or something? Thanks so much.

Link to post
Share on other sites

I'm still learning my way but thought of this:

 

You could go down the javascript route. Use onchange on the drop down menu and pass the value on to function to display the button.

 

In your head section:

 

<script type="text/javascript">
function set_button($value){
if($value=="--"){
	document.getElementById("button_box").style.display = 'none';
}else{
	document.getElementById("button_box").style.display = 'block';
	document.getElementById("button").value = $value;
}
}
</script>

 

In body the dropdown and button

 

<form name="form" id="form">
 <select name="menu" id="menu" onchange="set_button(this.value);">
 <option value="--">--</option>
   <option value="añadir al carrito">Spanish</option>
   <option value="Add to Cart">English</option>
   <option value="ajouter au panier">French</option>
 </select>

 <div id="button_box" style="display:none;">
 <br /><input id="button" type="button" value=""/>
</div>
</form>

 

The code is very basic, but hopefully a good starting point for you. I just added the -- option and if statement in the javascript so that if no language is selected no button will be shown. Adapt it to fit your own needs.

 

Hope this was what you're looking for :D

Link to post
Share on other sites

You can do this either way, easiest approach is probably javascript/jquery, but you can use PHP/MySQL or any other server-side language to populate your "different language" terms.

 

I made a heavily commented page which you can use to get some idea how to implement this kind of thing. You can populate $languages array using php/mysql or asp/mssql

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
// Create an associative array
var $languages = new Object();

// Set the array's properties
$languages['en'] = 'Buy';
$languages['de'] = 'Kaufen';
$languages['fr'] = 'Acheter';

// Here comes jQuery!
jQuery(function($){
// Set the elements into a variable for performance
var $selector = $("#language-selector");
var $target = $("#language-target");

// This function will change the button's text
function getLang(){
	// Grab the selected <option> element
	var $selected = $("option:selected", $selector);

	// Only run if there's a language selected
	// May be an unnecessary check...
	if($selected.size() > 0){
		// Get the selected language value
		var $tmpLang = $selected.val();

		// Set the button's text
		$target.val($languages[$tmpLang]);
	}
};

// Set event listener on $selector
$selector.change(function(){
	// Run getLang() if the selector changes
	getLang();
});	

// Manually call the function so it runs 
// for the first time when the DOM is ready
getLang();
});
</script>
</head>

<body>
<select id="language-selector">
<option value="en" selected="selected">English</option>
<option value="de">Deutsch</option>
<option value="fr">French</option>
</select>

<input type="submit" id="language-target" value="" />
</body>
</html>

 

Good luck :rolleyes:

Link to post
Share on other sites

Wow! You guys are SMART! Someday...maybe...i'll get there. Thank you so much!!!

 

No problem. I used to be scared of javascript but am starting to explore it and once you start to understand things it's easy what you can do with a few simple functions

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...