JavaScript - Dynamically Change Currencies With Dropdown
Hello,
I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu. What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. A very good example of this is: http://creativeon.com. When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content. I am a HTML developer and do not know much about javascripting. Please help me. P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter: http://www.codingforums.com/showthread.php?t=196577 http://www.codingforums.com/showthread.php?t=196373 Best Regards and Thanks in Advance. Similar TutorialsHi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!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> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript"> //<![CDATA[ function store(element) { // store values var cl = element; var text_list = new Array(); var value_list = new Array(); var length = cl.length; for (var foo=0; foo<length; foo++) { text_list[foo] = cl.options[foo].text; value_list[foo] = cl.options[foo].value; alert("text array " + foo + " " + text_list[foo]); alert("value array " + foo + " " + value_list[foo]); } populate(cl, text_list, value_list); } function populate(element, text, value) { // populate options with previously stored values var cl = element; var length = cl.length; cl.options.length=0; for (var bar=0; bar<length; bar++) { cl.options[bar]= new Option(text[bar], value[bar], false, false); } } function crafty_set_country(code) { var cl = document.getElementById('select'); store(cl); for (var i=0; i<cl.length; i++) { if (cl.options[i].value == code) { alert(cl.options[i].value + " found"); var value = cl.options[i].value; var text = cl.options[i].text; cl.options.length=0; cl.options[0]=new Option(text, value, true, true); /* for (var j=0; j<cl.length; j++) { alert("second loop " + cl.options[j].text); if (cl.options[i].value != code) { cl.options[j] } } */ } else { alert(cl.options[i].value); } } } //]]> </script> </head> <body> <form> <select id="select"> <option value="10">ten</option> <option value="20">twenty</option> <option value="30">thirty</option> <option value="40">fourty</option> <option value="50">fifty</option> <option value="60">sixty</option> </select> <input type="button" value="remove" name="button" onClick="crafty_set_country(50)"> <input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)"> </form> </body> </html> Many thanks! Martin Hi, I try to change script source dynamically. When I use the following code, it works fine, and the script is executed Code: <script type="text/javascript"> document.write('<script src="http://gamestoenjoy.com/site/test.php"'); </script> However when I use the following code, it doesn't work, the script isn't executed Code: <script type="text/javascript"> var url = "http://gamestoenjoy.com/site/test.php"; document.write('<script src=url>'); </script> The only difference between the codes is that in the first code I use constant sting, and in the second code I use variable, in order to make the source dynamic. Please help me to solve this problem. I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be. Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? Hi Guys, I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this... Here i tried like this, <html> <head> <script> function copy_data(val,id,textareaValue){ var enteredText = val; alert("enteredText -----------"+enteredText); var boxId= id; alert("boxId-----------"+boxId); var textValue= textareaValue; alert("textValue-----------"+textValue); var beforeBrac = textValue.substring(0,textValue.indexOf("<")); alert("beforeBrac -----------"+beforeBrac ); var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">")); alert("inbracket -----------"+inbracket); if(boxId = "1"){ inbracket = val; } alert("inbracket -----------"+inbracket); var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length); alert("afterBrac -----------"+afterBrac ); var fstr = beforeBrac +"<"+inbracket +afterBrac ; if(boxId == "1"){ document.getElementById('txtArea').value = fstr; alert("final str value is"+fstr); } } </script> </head> <body> <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/> <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/> <textarea rows="2" cols="20" id="txtArea"> At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP. </textarea> </body> </html> three text boxes with some value [ value1 ] [value2] [value3 ] this is the text area content:- At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP. the output should be :- At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP... But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ... I want to be able to display a table of images, all the same size, click on any one and show a corresponding htm pages in an iframe, click outside the ifram or on it to close it; click on another image and on and on... So far, I am able to hide the initial iframe and/or display it inline but am unable to show it above the table that holds the images. It is not difficult to do this using screen-captured images of the htm pages but I am looking for a dynamic way of doing this either with javascript or php or just plain html. The htm pages contain a recipe with an photo and text in a <table>. If needed, I could whip up a small demo. Any help would be much appreciated. Hi , I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script type="text/javascript" src="js/direct_invoice_table.js"> </script> <html> <head> <title>Direct Invoice</title> </head> <body leftmargin="0" topmargin="0"> <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" /> <b> Invoice</b></p> <table id="Client_Details"> <tr> <th>Client Name:</th> <td><input type="text" name="client_name" size="20" maxsize="20" /></td> </tr> <tr> <th>Client Address:</th> <td><input type="text" name="address_line1" size="20" maxsize="40" /></td> </tr> <tr> <td></td> <td><input type="text" name="address_line2" size="20" maxsize="40" /></td> </tr> <tr> <th>Pin Code:</th> <td><input type="text" name="client_pin" size="7" maxsize="7" /></td> </tr> <tr> <th>City/State/Country:</th> <td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td> <td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td> <td><input type="text" id="client_country" size="10" maxsize="20" /></td> </tr> <tr> <th>Email Address:</th> <td><input type="text" name="client_city" size="10" maxsize="30" /></td> </tr> <tr> <th>TIN/PAN:</th> <td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td> </tr> </table> <table align="center" width = "75%"> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <th>Item No</th> <th>Item Name</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> <th> <font color="RED">Delete</font></th> </tr> <tr> <td>1</td> <td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td> <td><input type="text" name="description[]" size="20" " maxsize="100" /></td> <td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td> <td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td> <td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td> </tr> </table> <table id="totaltbl" align="right"> <tr> <td></td> </tr> <tr> <th>Vat %</th> <td><input type="text" name="total" size="3" maxsize="3" /></td> </tr> <tr> <th>Total</th> <td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td> </tr> </table> </td> </tr> </table> <form action="save_entry.php" name="eval_edit" method="post" format="html"> <p> <input type="button" value="Add Row" onclick="addRow();" /> <input type="button" value="Calculate Total Amount" onclick="Totalcal();" /> <input type="button" value="Print" /> </p> </form> <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" /> </p> <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p> <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p> </body> </html> *************** The below is the javascript function that i wrote Code: function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight1 = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element itemname, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of itemname8. super fantastic. // the exact same thing with a unique id el.id = 'itemname[]'+ iteration; // set it to size of 40. setting sizes is good. el.size = 40; // same thing as earlier, append our element to our freshly and clean cell cellRight1.appendChild(el); var cellRight2 = row.insertCell(2); var e2 = document.createElement('input'); e2.type = 'text'; e2.id = 'description[]' + iteration; e2.size = 20; e2.maxsize = 100; cellRight2.appendChild(e2); var cellRight3 = row.insertCell(3); var e3 = document.createElement('input'); e3.type = 'text'; e3.id = 'unitcost[]' + iteration; e3.size = 10; e3.maxsize = 100; cellRight3.appendChild(e3); var cellRight4 = row.insertCell(4); var e4 = document.createElement('input'); e4.type = 'text'; e4.id = 'quantity[]'+ iteration; e4.size = 4; e4.maxsize = 100; cellRight4.appendChild(e4); var cellRight5 = row.insertCell(5); var e5 = document.createElement('input'); e5.type = 'text'; e5.id = 'price[]'+ iteration; e5.size = 10; e5.maxsize = 100; cellRight5.appendChild(e5); // var cellRight7 = row.insertCell(7); // var e7 = document.createElement('input'); // e7.type = 'CHECKBOX'; // e7.id = 'cancel[]'; // cellRight7.appendChild(e7); var cellRight6 = row.insertCell(6); cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>"; e4.onclick = dynamic_onc(); } function removeRow(src) { /* src refers to the input button that was clicked. to get a reference to the containing <tr> element, get the parent of the parent (in this case case <tr>) */ var oRow = src.parentElement.parentElement; //once the row reference is obtained, delete it passing in its rowIndex document.all("mySampleTable").deleteRow(oRow.rowIndex); } function countRow() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function CalculatePrice() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function onc() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b); document.getElementById('price[]').value =c; } function dynamic_onc() { alert('Jay' ); e5.value =7; } function Totalcal() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b.value); document.getElementById('price[]').value =c; } Hello, i want to integrate dropdown combobox menu on my website for pricing, i want the same like it is on the following link: Web Hosting - Shared cPanel Web Hosting and on this website there is no choose currency option, but i have set on my website on the corner of the top side. how can i do this? Regards, Alex C Hello, I am needing the coding to do the follow: When a user makes a selection from a dropdown, the value is placed in a text input. SELECT >>> INPUT Thank you so much for your help! Hi all. I am creating a website and it utilizes the Apple Touch Icon: Code: <link rel="apple-touch-icon" href="/customIcon.png"/> Basically, I want to be able to change the bolded part from a drop down menu. Like, the user would select a certain item in the drop down menu and it would change the bolded part to a different link (the one corresponding to the drop down menu selection). Any ideas? Hey i am using a dropdown list to change an image but i doesnt work Javascript: Code: addEventListener("load", configurator, false); function configurator() { var model = document.getElementById("Model").value var afbeelding = document.getElementById("modelafbeelding") switch (model) { case "Audi A1": var foto = "./images/audia1.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; case "Audi A3": var foto = "./images/audia3.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; case "Audi A4": var foto = "./images/audia4.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; case "Audi A5": var foto = "./images/audia5.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; case "Audi A6": var foto = "./images/audia6.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; case "Audi R8": var foto = "./images/audir8.png" afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>"); break; } } HTML: Code: <tr> <td><select id="Model" name="Model"> <option>Audi A1</option> <option>Audi A3</option> <option>Audi A4</option> <option>Audi A5</option> <option>Audi A6</option> <option>Audi R8</option> </select></td> <div id="modelafbeelding"></div> </tr> I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness. I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible: Code: <html> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)"> <option selected value="What is JavaScript?">What is JavaScript?</option> <option value="Why learn JavaScript?">Why learn JavaScript?</option> <option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option> <option value="What is DHTML?">What is DHTML?</option> </select><br> </td> </tr> <tr> <td width="100%"><div id="output"></div><br> <font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font> </td> </tr> </table> </form> </td> </tr> </table> <p> <script language="JavaScript"> /* Drop down messages script By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ //change contents of message box, where the first one corresponds with the first drop down box, second with second box etc var thecontents=new Array() thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects,<br> <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>' thecontents[1]='The first word that comes to mind is: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, etc etc 1' thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, etc. etc. 2' thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable etc. etc 3' //don't edit pass this line function changecontent(which){ document.getElementById('output').innerHTML=thecontents[which.selectedIndex] } document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex] </script> </body> </html> basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text.. now what i need is a way to change all of these fields with a fetch button. i can get the value for the fields from the perl script on my server side. the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted . i am struggling with the simplist of codes to set the value of the fields from a javascript variable any ideas please. Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html> <head> <style type='text/css'> #txt {background-repeat:no-repeat;width:200px;height:200px;} </style> <script type='text/javascript'> function div_bg(team){ document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)"; } </script> </head> <body> <select name='team' onChange='div_bg(this.value);'> <option name='arsenal' value='arsenal'>Arsenal</option> <option name='liverpool' value='liverpool'>Liverpool</option> </select> <div id='txt'></div> </body> Thanks in advance!! like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) { if (val > 1) { var box = 'lie[' + field + ']'; document.form1.box.disabled == false; } else { document.form1.box.disabled == true; } } Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e) { var popin = document.getElementById('popin'); popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>"; popin.style.display = "block"; } this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed Hi Guys, I am using the following bit of code to toggle information inside a webpage. Is there a way i can make this code more dynamic so that i do not have to use the next() function to initiate slidetoggle()? I would like to have it so i can pass an ID through to the function and it will then toggle my box but i can't figure it out. Javascript is not my strong suite. Here the function Code: function initMenu() { //$('.items_wrapper').hide();//object to be hidden $('.headline').click(//object to be clicked function() { $(this).next().slideToggle('slow'); //alert("doesn't work"); } ); } $(document).ready(function() {initMenu();}); I would like to create a link inside .headline such as .ViewItems If you need to see the code let me know and i will post it. --EDIT-- Right Now my code is like this and you click headline Code: <div class='headline'></div> <div class='items_wrapper'> </div> I would like it work with an internal element like this, so i can't use next() Code: <div class='headline'><div class='selector'>Click Here</div></div> <div class='items_wrapper'> </div> Thanks in advance. |