|
JavaScript - I Need A Help With Dropdown Boxes
Similar TutorialsI am trying to make a unit converter with two dropdown boxes, two textfields and a button. I want to enter a number into the first textfield, select a unit option, then select another appropriate unit option based on the first selection, press the button and get the result in the second textfield. What would be the best approach for this. So far I have: <html> <head> <script type="text/javascript"> function convertUnit () { // convert pound to kilogram document.unitForm.toField.value = document.unitForm.fromField.value / 2.2; // convert kilogram to pound document.unitForm.toField.value = document.unitForm.fromField.value * 2.2; // convert inch to centimeter document.unitForm.toField.value = document.unitForm.fromField.value / 2.54; // convert centimeter to inch document.unitForm.toField.value = document.unitForm.fromField.value * 2.54; } </script> </head> <body style="background-color:lightgray"> <form action="" name="unitForm"> <input type="text" name="fromField" onfocus="this.form.fromField.value=''; style.background='lightyellow';" onblur="style.background='white';" /> <select name="fromList" > <option value="" selected="selected">Unit</option> <option id="fromPound" value="2.2">lb</option> <option id="fromKilogram" value="1.0">kg</option> <option id="fromInch" value="1.0">in</option> <option id="fromCentimeter" value="2.54">cm</option> </select> <input type="button" value="Convert" onclick="convertUnit()" /> <input type="text" name="toField" readonly="readonly" /> <select name="toList"> <option value="" selected="selected">Unit</option> <option name="toKilogram" id="toKilogram" value="1.0">kg</option> <option name="toPound" id="toPound" value="2.2">lb</option> <option name="toCentimeter" id="toCentimeter" value="2.54">cm</option> <option name="toInch" id="toInch" value="1.0">in</option> </select> <input type="reset" value="Reset" /> </form> </body> </html> Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question. Here's what I'm trying to do. I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated. S Hi, 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 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 Hi Can anyone help with this.... I'm trying to create and object that has text on either side of the flip boxes and when the correct answers are showing (some will need to be flipped and some not). The boxes are disapled and a message appears to say this is correct. I need to work out how to write different text on the other side of each flip box How to differentiate between when the box is flipped and when it isnt (to assign a value) How to disable boxes when all are correct or how to add a subit button so that when users think the boxes are correct they click to check answers So far I have this and now im stuck, its not doing exactly what i want. I'm new to all this and just need a bit of guidance... Code: <style>
.content {
width: 880px;
height:180px;
}
.test {
width:800
height:100
}
.answers{
position:absolute;
width:25px;
height:20px;
left: 200px;
top: 4px;
}
.correct{
background-repeat:no-repeat;
background-image:url(assets/correct-small.png);
z-index:1;
}
.incorrect{
background-repeat:no-repeat;
background-image:url(assets/incorrect-small.png);
z-index:1;
}
.flip {
position:relative;
float:left;
margin-left:3px;
margin-right:3px;
width: 500px;
height: 22px;
padding: 3px;
margin-bottom: 2px;
border: 1px #CCC solid;
background-color: #EFEFEF;
text-align: center;
}
.flip:hover{
cursor: pointer;
background-color: #FFF;
}
</style>
<script language="javascript">
trueCount = 0;
falseCount = 0;
for(i=1;i<=15;i++) {
$("#flipbox" + i).click(function(){
$(this).flip({
direction:'tb',
color: '#EFEFEF',
});
});
}
function addAnswer(div, answer){
if($("#"+div).hasClass("correct")) {
trueCount--;
$("#"+div).removeClass("correct");
}
else {
$("#"+div).addClass("correct");
answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
trueCount++;
if(trueCount == 2) {
$(".test").fadeOut(1000, function(){
$(this).html("<h3>Correct - </h3>"
).fadeIn(1000);
})
}
}
}
updateBookmark();
</script>
<br /><br />
<div class="content">
<div class="flip" onclick="addAnswer('answer1','c')" id="flipbox1">Reading a book<div class="answers" id="answer1"></div></div>
<div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
<div class="flip" onclick="addAnswer('answer3','c')" id="flipbox3">Talk<div class="answers" id="answer3"></div></div>
<div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Make eye contact<div class="answers" id="answer4"></div></div>
<div class="flip" onclick="addAnswer('answer5','c')" id="flipbox5">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>
Hi, I've been searching for a good tut on modal boxs for a while where they open in middle of screen like facebook boxs & i want to have one where you use onClick function from href link. example: <a href="#" onclick="'files/delete.php?postId=$post['id']','modal_box'">Delete</a> and so on with other things. Can anyone help. Thanks. Ok I know there are a few other posts about this but I can't find one similar to my problem. The confirmation box pops up, but cancel does nothing. it is for deletion of a movie off a server for class, but if you hit cancel it deletes the entry anyway. here is my code: Code: <script type="text/javascript">
function show_confirm()
{
var r=confirm("Are you sure you want to delete?");
if (r==true)
{
window.location="movie_delete.cfm?FilmID=#FilmID#";
}
}
</script>
[<a href="movie_delete.cfm?FilmID=#FilmID#" onclick="show_confirm()">Delete</a>]
notice anything wrong? ok i have to selection boxes and they need to read each other and input either a yes or a no into a text form i would really appreciate some help thanks heres what i have if it helps Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Galvanic Corrosion Chart</title> </head> <body> <br /> <form name="gcc"> <div align="center"><a href="website.html"><img style="border: 0px solid ; width: 278px; height: 50px;" alt="" src="pics/LOGO.png" border="0" height="50" width="278" /></a><br /> </div> <p style="text-align: center;" align="center"><font size="+2"><span style="font-family: Century Gothic;"><font style="text-decoration: underline;" size="+3"> <font face="Futura Bk BT">Galvanic Corrosion Chart<span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;" /></span></span></span></span></font></font></span></font><font face="Futura Bk BT"><br /> </font> </p> <br /> <table style="text-align: left; margin-left: auto; margin-right: auto;" height="119" width="610"> <tbody> <tr> <td style="vertical-align: top; text-align: center;" align="center" valign="middle"><font face="Futura Bk BT"><font size="+1"> <font size="+1"> Material 1</font></font><br /> <select name="mat1"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> <br /> </font></td> <td colspan="1" rowspan="1" style="vertical-align: top; text-align: center;" valign="middle"><font face="Futura Bk BT"><font size="+1"> Material 2</font><br /> </font> <select name="mat2"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> </td> </tr> <tr> <td colspan="2" rowspan="1" align="center" valign="top"><font face="Futura Bk BT" size="+1">Acceptable</font><br /> <font face="Futura Bk BT"><input name="AR" readonly="readonly" /></font></td> </tr> </tbody> </table> </form> </body> </html> Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen? Here's a live example: www.cirula.com/options here is my coding Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>
</head>
<body onLoad="setDefaultValues()">
<div align="center">
<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>
Ok, this HAS to be some stupid typo I can't find somewhere or something but I don't see where. Basically the alertbox works just fine when only the show_alert() function and the button calling it are in the code. But neither work if only the alert() function and the button calling that are in the code, nor does it work by itself. However I see no differences in how they are coded unless I am missing something very very simple. Code: <html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
function alert()
{
alert("again");
}
</script>
</head>
<body>
<input type="button" onClick="show_alert()" value="Show alert box" />
<input type="button" onClick="alert()" value="CLICK me" />
</body>
</html>
Hi, I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list. I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages. Is this possible. Thanks Is there a way add another dropdown form to this script? http://javascript.internet.com/navig...-comboxes.html Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made... Thanks in advance... I am trying to get these prompt boxes to display for age and resting heart rate. I cannot get this to work...This is what I have...any suggestions? <html> <head> <h1>Calculate Your Target Heart Rate</h1> <p>You can calculate your heart rate so that you can get the maximun results from your cardiovascular workout. Just follow these simple steps:</p> <script type="text/javascript"> function show_prompt() { var number = prompt ("Please enter your Resting heart rate:","Enter Rest Heart Rate Here!"); if (number! null && number! = "") var age = prompt ("Please enter your Age", "Enter Your Age Here!"); { document.write ("Your Resting Heart Rate is" + number); document.write ("Your Age is" + Age); } } </script> </head> <body> <input type ="button" onclick = "show_prompt ()" value = "Start Calculating Here!"/> </body> </html> I am stuck on this question. 1. To set the value contained in a field such as an input box, you must use the ____________________ property. This is based on Javascript. What type of properties are used for fields in an input box? Thanks Calculating quiz answers? Code: var correctAnswers = new Array();
correctAnswers[1] = "Extensible Hypertext Markup Language";
correctAnswers[2] = "<p></p>";
correctAnswers[3] = "<br />";
function checkAnswers(){
var score = 0;
for (i=1; i<4; i++){
correctAnswers = getSelectValue("quiz","q" + i);
if (correctAnswers == correctAnswers[i]){
score++;
}
}
Hi, I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look. <html> <!-- esp.html Nick Bravante --> <!-- C --> <!-- ======================= --> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; number = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guessOne + " My number was " + number + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 1" onclick="PickNumber();" /> <br /> <input type="text" id="messageBox" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBoxTwo { var number; numberTwo = RandomInt(1, 4); document.getElementById('messageBoxTwo').value= "You guessed " + guessTwo + " My number was " + numberTwo + "."; } </script> </head> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberThree = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guess + " My number was " + numberThree + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 2" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxTwo" size="90" /> </p> </body> </br> <body> Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 3" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxThree" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberFour = RandomInt(1, 4); document.getElementById('messageBoxFour').value= "You guessed " + guessFour + " My number was " + numberFour + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 4" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxFour" size="90" /> </p> </body> </html> In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere. Form code: Code: Month 1: <input size="7" type="text" value="0" id="return1" name="return_1"> <input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();"> Month 2: <input size="7" type="text" id="return2" value="0" name="return_2"> Month 3: <span style="color:black; font-size:14px;" id="return3"></span> ThirdReturn code: Code: function thirdReturn() {
var first_return = document.getElementById("return1").value;
var second_return = document.getElementById("return2").value;
first_return = first_return.replace(/\,/g,'');
second_return = second_return.replace(/\,/g,'');
var combined = Number(first_return) + Number(second_return);
if (typeof this.remaining_pipp_amount == "undefined") {
alert('Please select a Flex option');
}
else{
if (combined > this.remaining_pipp_amount){
alert('Return Amount Exceeds Credit Amount');
}
else{
var temp = this.remaining_pipp_amount - combined;
var third_return_amount = document.getElementById("return3");
third_return_amount.innerHTML = addCommas(Math.round(temp));
}
}
}
I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have: Code: function thirdReturn() {
var first_return = document.getElementById("return1").value;
var second_return = document.getElementById("return2").value;
first_return = first_return.replace(/\,/g,'');
second_return = second_return.replace(/\,/g,'');
var combined = Number(first_return) + Number(second_return);
if (typeof this.remaining_pipp_amount == "undefined") {
alert('Please select a Flex option');
}
else{
if (combined > this.remaining_pipp_amount){
alert('Return Amount Exceeds Credit Amount');
}
else{
var temp = this.remaining_pipp_amount - combined;
if (second_return == 0){
var new_second = document.getElementById("return2")
new_second.innerHTML = Math.round(temp);
}
else{
var third_return_amount = document.getElementById("return3");
//alert (temp);
third_return_amount.innerHTML = addCommas(Math.round(temp));
}
}
}
}
Does anyone know why this doesn't work or what can be done to fix it? Thank you! |
|||||||