shoopaie Posted March 10, 2011 Report Share Posted March 10, 2011 This is for all the pro's out there 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. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 10, 2011 Report Share Posted March 10, 2011 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 Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 10, 2011 Report Share Posted March 10, 2011 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 Quote Link to comment Share on other sites More sharing options...
shoopaie Posted March 10, 2011 Author Report Share Posted March 10, 2011 Wow! You guys are SMART! Someday...maybe...i'll get there. Thank you so much!!! Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 10, 2011 Report Share Posted March 10, 2011 pb1uk's approach is probably easier, since you will be storing the different language text inside the <option>'s value. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 10, 2011 Report Share Posted March 10, 2011 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.