|
JavaScript - Multiple Dynamic Dropdowns
I've been trying to create a page with two forms that have drop downs in them. These drop downs are set to store information from the previous drop down and I can get one to work easliy but having two forms has got me stopped in my tracks. I'm new to this and new to the forums so any help is apeciated. Just go easy on me. heh!
Under the function where it says function setOptions(chosen,theform) { var selbox = document.theform.opttwo; I tried changing 'theform' to 'myform1' and so forth but neither worked. Thanks again for your time and effort in helping me! Here's my code: Code: <html>
<head>
<SCRIPT TYPE="text/javascript">
<!--
function setOptions(chosen,theform) {
var selbox = document.theform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
//-->
</SCRIPT>
</head>
<body link="#000066" vlink="#999999" alink="#FFFF00">
<table width="40%" height="447" border="0">
<tr>
<td><div align="left"><img src="images/topbar.jpg" width="740" height="29" border="0" usemap="#Map"></div></td>
</tr>
<tr>
<td height="332"> <p align="left"> </p>
<div align="left">
<table width="740" height="187" border="0" align="left">
<tr>
<td height="97" colspan="2"> <div align="center"></td>
</tr>
<tr>
<td width="49%" height="21"> <div align="center"><strong>Form One</strong></div></td>
<td width="51%"> <div align="center"><strong>Form Two</strong></div></td>
</tr>
<tr>
<td height="47"><form name="myform1">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value,"myform1");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
<td><form name="myform2">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform2.optone.options[document.myform2.optone.selectedIndex].value,"myform2");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform2.opttwo.options[document.myform2.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
</tr>
</table>
</div>
<p align="left"> </p>
<p align="left"> </p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><img src="images/bottombar.jpg" width="740" height="16"></div></td>
</tr>
<tr>
<td height="56"> <div align="center"></td>
</tr>
</table>
</body>
</html>
Similar TutorialsHi everyone. I am trying to have 2 sets of populated dropdowns (state,city). One for the billing address and the other one for shipping address. I read this article http://www.digimantra.com/technology...ered-dropdown/ and did it step by step. It worked when I had only a set of populated dropdowns but when I duplicated and edited the script, only the new script works. Can somebody tell me where I went wrong? Here's the code for the script: Code: <script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('city');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"cities_data.php?state="+ x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('city');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('city');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('state_pro vince'));
}
</script>
<script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('shipping_city ');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"shipping_cities_data.php ?state="+x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('shipping_ state_province'));
}
</script>
Thanks! D Apologizes for the long post, I wanted to be thorough. I am not very familiar with Javascript at all, learning every day - but hopefully this has an easy fix. I'm making an application where students can select their SCHOOL in a dropdown, which based on the selection, displays a second dropdown containing CLASSES. This part works fine. It then converts the value of the dropdown-selection to an ID-number which is used pasted in a URL for that class's online schedule (Example: www. url.com/generator/school= '+chosenSchool+' class= '+chosenClass+' blablabla.aspx) - plus saves the ID to recognize the selection for later use. This also worked fine, before I added the more than one school. Now, whenever I select a SCHOOL and a CLASS, I get the correct SCHOOL but the CLASS is always the FIRST ID in the list (marked in red ), and I'm not sure why. I thought about creating different variables for each class-list, but there is really more than two, and I need the name of the variable to be the same (chosenSchool) for the storing and URL-input. Code:
$(function() {
$("#school").change(function() {
// DROPDOWN LIST WITH DIFFERENT SCHOOLS
var schoolValue = document.getElementById('dropdown-school').selectedIndex; // GETS THE DROPDOWN VALUE (0-1)
var schoolID = ["60690","60360"] // NEEDED ID
chosenSchool=schoolID[schoolValue] // CONVERTS TO ID
var selectedSchool = $("#school").val(); // MANAGE DROPDOWNS BELOW
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE FIRST SCHOOL WHEN SELECTED
if(selectedSchool == "firstSchool") {
$("#firstSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var firstClassValue = document.getElementById('classlist-1').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var firstClassID =
[" 45B9D5AD-8E32 ","0A9261F7-8BC7E","307C7E8C-054E","B21D19A7-5076","99ECF5B8-E0E1","36B44988-006F""] // NEEDED ID
chosenClass=firstClassID[firstClassValue] // CONVERTS TO ID
}
else {
$("#firstSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE SECOND SCHOOL WHEN SELECTED
if(selectedSchool == "secondSchool") {
$("#secondSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var secondClassValue = document.getElementById('classlist-2').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var secondClassID =
[" 4EBF33E0E514 ","05F96E17-8DF9","4EA71DA6-5CCC","F7D08749-746E","0CA6F782-6B9D","BBD66276-752F"] // NEEDED ID
chosenClass=secondClassID[secondClassValue] // CONVERTS TO ID
}
else {
$("#secondSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
});
$('#school').trigger('change'); // TRIGGERS THE CHANGE
});
// SAVES THE SELECTED VALUES
function saveSettings() {
localStorage.setItem('SCHOOL', chosenSchool); // SAVES SCHOOL ID-NUMBER
localStorage.setItem('CLASS', chosenClass); // SAVES CLASS ID-NUMBER
location.reload(true) // RELOAD WITH SAVED VALUES
}
// HTML:
SCHOOL DROPDOWN:
<select name="school" id="school">
<option value="val0">firstSchool</option>
<option value="val1">secondSchool</option>
</select>
CLASS DROPDOWN 1:
<select name="classlist-1" id="classlist-1">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
CLASS DROPDOWN 2:
<select name="classlist-2" id="classlist-2">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
So my "chosenClass" is always the ID marked red. Why? Appreciate and help I can get.. Thanks for reading. Please keep in mind that I have more than two schools and class-lists, and any misspellings might be because I changed some values to keep it simple. Regards, Andrew. Hope some one can assist me Below is my code which works fine. I need to be able to select more than one of the options at the same time. The code at the moment will only select one option rather than all my options. Any advice would be great. <HTML> <HEAD> <title>MDT Role and Application Selection Application - Gen-i</title> <!-- Example of the multiple selections Sub RunScript For i = 0 to (Dropdown1.Options.Length - 1) If (Dropdown1.Options(i).Selected) Then strComputer = strComputer & Dropdown1.Options(i).Value & vbcrlf End If Next Msgbox strComputer End Sub --> <script> function setOptions(chosen) { var selbox = document.myform.opttwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Cognos Application','Cognos Application selected'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Cognos Application','Cognos Application selected'); selbox.options[selbox.options.length] = new Option('Oracle Discoverer','Oracle Discoverer selected'); selbox.options[selbox.options.length] = new Option('At Risk 5.55','At Risk 5.55 selected'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Vulcan 8','Vulcan 8 selected'); selbox.options[selbox.options.length] = new Option('Autocad Lite 2010 Lite','Autocad Lite 2010 Lite selected'); selbox.options[selbox.options.length] = new Option('Autocad Lite 2010 Full','Autocad Lite 2010 Full selected'); selbox.options[selbox.options.length] = new Option('Aquire','Aquire selected'); selbox.options[selbox.options.length] = new Option('WellCad','WellCad selected'); selbox.options[selbox.options.length] = new Option('ArcGis','ArcGis selected'); selbox.options[selbox.options.length] = new Option('QuickMap','QuickMap selected'); } } </script> <HTA:APPLICATION border="thin" borderStyle="normal" caption="yes" maximizeButton="yes" minimizeButton="yes" showInTaskbar="no" innerBorder="yes" navigable="yes" scroll="auto" scrollFlat="yes" /> <script LANGUAGE="VBScript"> Sub Window_onLoad window.resizeTo 600,720 End Sub </script> </head> <body style="{background-image:url('bg2.jpg'); background-repeat:no-repeat;}"> <CENTER> <img src="logo.gif" /> <h2 style="font-size: 12pt; font-family: Arial; color: #000">Please select the required role - Gen-i</h2> <div style="font-size: 10pt; font-family: Arial; color: #298FFF"> <form name="myform"><div align="center"> <b>Select a Role:</b> <br /> <select name="optone" size="1" onchange="setOptions(document.myform.optone.options [document.myform.optone.selectedIndex].value);"> <option value=" " selected="selected"> </option> <option value="1">General</option> <option value="2">Technical</option> <option value="3">Finance</option> </select> <br /><br /><b>Select Applications:</b> <br /> <select name="opttwo" size="10" multiple> <option value=" " selected="selected">Please select one of the options above first</option> </select> <p></p> <input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options [document.myform.opttwo.selectedIndex].value);"> </div></form> </body> </html> Hi i just switched over from 1.5 to 2.2 swfobject. in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange. but anyway i was reading this.. http://groups.google.com/group/swfob...1e29c96933dfa0 and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop. i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it. but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos... javascript is really not my cup of tea lol... here is my code.. in the head i have this ... Code: <!-- added for swfobject 2.2 -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script
and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one. Code:
begin the loop then do this
<div style="float:left;">
<table border="0" align="left"><tr>
<td align="center"><td align="center"><?=$sql_array->vid_name?><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</td></tr></table>
</div>
loop again till done...
so what do i do to show multiples on a page. I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>
<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">
<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>
<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>
<tr>
<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>
</table>
Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{
document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{
case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
break;
case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
break;
}
return true;
}
</script>
Thanks Daniel Hi all, please help... There is a small, but very usability script - Multiple Dynamic Combo Boxes by Elviro Mirko (http://www.javascriptkit.com/script/...plecombo.shtml). Since there are many versions of this script. One of them, which I did. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box //
data_1 = new Option("All Models", "#");
data_2 = new Option("Model 1", "#");
data_3 = new Option("Model 2", "#");
// second combo box //
//All
data_1_1 = new Option("All Types", "#");
data_1_2 = new Option("Type 1", "#");
data_1_3 = new Option("Type 2", "#");
//Model 1
data_2_1 = new Option("All Types", "#");
data_2_2 = new Option("Type 1", "#");
data_2_3 = new Option("Type 2", "#");
//Model 2
data_3_1 = new Option("All Types", "#");
data_3_2 = new Option("Type 1", "#");
data_3_3 = new Option("Type 2", "#");
// third combo box //
//All Models
data_1_1_1 = new Option("All Sizes", "#");
data_1_1_2 = new Option("Size 1", "#");
data_1_1_3 = new Option("Size 2", "#");
data_1_2_1 = new Option("All Sizes", "#");
data_1_2_2 = new Option("Size 1", "#");
data_1_2_3 = new Option("Size 2", "#");
data_1_3_1 = new Option("All Sizes", "#");
data_1_3_2 = new Option("Size 1", "#");
data_1_3_3 = new Option("Size 2", "#");
//Model 1
data_2_1_1 = new Option("All Sizes", "#");
data_2_1_2 = new Option("Size 1", "#");
data_2_1_3 = new Option("Size 2", "#");
data_2_2_1 = new Option("All Sizes", "#");
data_2_2_2 = new Option("Size 1", "#");
data_2_2_3 = new Option("Size 2", "#");
data_2_3_1 = new Option("All Sizes", "#");
data_2_3_2 = new Option("Size 1", "#");
data_2_3_3 = new Option("Size 2", "#");
//Model 2
data_3_1_1 = new Option("All Sizes", "#");
data_3_1_2 = new Option("Size 1", "#");
data_3_1_3 = new Option("Size 2", "#");
data_3_2_1 = new Option("All Sizes", "#");
data_3_2_2 = new Option("Size 1", "#");
data_3_2_3 = new Option("Size 2", "#");
data_3_3_1 = new Option("All Sizes", "#");
data_3_3_2 = new Option("Size 1", "#");
data_3_3_3 = new Option("Size 2", "#");
// fourth combo box //
//All Models
data_1_1_1_1 = new Option("All color","http://special.link");
data_1_1_1_2 = new Option("Color 1","http://special.link");
data_1_1_1_3 = new Option("Color 2","http://special.link");
data_1_1_2_1 = new Option("All color","http://special.link");
data_1_1_2_2 = new Option("Color 1","http://special.link");
data_1_1_2_3 = new Option("Color 2","http://special.link");
data_1_1_3_1 = new Option("All color","http://special.link");
data_1_1_3_2 = new Option("Color 1","http://special.link");
data_1_1_3_3 = new Option("Color 2","http://special.link");
data_1_2_1_1 = new Option("All color","http://special.link");
data_1_2_1_2 = new Option("Color 1","http://special.link");
data_1_2_1_3 = new Option("Color 2","http://special.link");
data_1_2_2_1 = new Option("All color","http://special.link");
data_1_2_2_2 = new Option("Color 1","http://special.link");
data_1_2_2_3 = new Option("Color 2","http://special.link");
data_1_2_3_1 = new Option("All color","http://special.link");
data_1_2_3_2 = new Option("Color 1","http://special.link");
data_1_2_3_3 = new Option("Color 2","http://special.link");
data_1_3_1_1 = new Option("All color","http://special.link");
data_1_3_1_2 = new Option("Color 1","http://special.link");
data_1_3_1_3 = new Option("Color 2","http://special.link");
data_1_3_2_1 = new Option("All color","http://special.link");
data_1_3_2_2 = new Option("Color 1","http://special.link");
data_1_3_2_3 = new Option("Color 2","http://special.link");
data_1_3_3_1 = new Option("All color","http://special.link");
data_1_3_3_2 = new Option("Color 1","http://special.link");
data_1_3_3_3 = new Option("Color 2","http://special.link");
//All Model 1
data_2_1_1_1 = new Option("All color","http://special.link");
data_2_1_1_2 = new Option("Color 1","http://special.link");
data_2_1_1_3 = new Option("Color 2","http://special.link");
data_2_1_2_1 = new Option("All color","http://special.link");
data_2_1_2_2 = new Option("Color 1","http://special.link");
data_2_1_2_3 = new Option("Color 2","http://special.link");
data_2_1_3_1 = new Option("All color","http://special.link");
data_2_1_3_2 = new Option("Color 1","http://special.link");
data_2_1_3_3 = new Option("Color 2","http://special.link");
data_2_2_1_1 = new Option("All color","http://special.link");
data_2_2_1_2 = new Option("Color 1","http://special.link");
data_2_2_1_3 = new Option("Color 2","http://special.link");
data_2_2_2_1 = new Option("All color","http://special.link");
data_2_2_2_2 = new Option("Color 1","http://special.link");
data_2_2_2_3 = new Option("Color 2","http://special.link");
data_2_2_3_1 = new Option("All color","http://special.link");
data_2_2_3_2 = new Option("Color 1","http://special.link");
data_2_2_3_3 = new Option("Color 2","http://special.link");
data_2_3_1_1 = new Option("All color","http://special.link");
data_2_3_1_2 = new Option("Color 1","http://special.link");
data_2_3_1_3 = new Option("Color 2","http://special.link");
data_2_3_2_1 = new Option("All color","http://special.link");
data_2_3_2_2 = new Option("Color 1","http://special.link");
data_2_3_2_3 = new Option("Color 2","http://special.link");
data_2_3_3_1 = new Option("All color","http://special.link");
data_2_3_3_2 = new Option("Color 1","http://special.link");
data_2_3_3_3 = new Option("Color 2","http://special.link");
//All Model 2
data_3_1_1_1 = new Option("All color","http://special.link");
data_3_1_1_2 = new Option("Color 1","http://special.link");
data_3_1_1_3 = new Option("Color 2","http://special.link");
data_3_1_2_1 = new Option("All color","http://special.link");
data_3_1_2_2 = new Option("Color 1","http://special.link");
data_3_1_2_3 = new Option("Color 2","http://special.link");
data_3_1_3_1 = new Option("All color","http://special.link");
data_3_1_3_2 = new Option("Color 1","http://special.link");
data_3_1_3_3 = new Option("Color 2","http://special.link");
data_3_2_1_1 = new Option("All color","http://special.link");
data_3_2_1_2 = new Option("Color 1","http://special.link");
data_3_2_1_3 = new Option("Color 2","http://special.link");
data_3_2_2_1 = new Option("All color","http://special.link");
data_3_2_2_2 = new Option("Color 1","http://special.link");
data_3_2_2_3 = new Option("Color 2","http://special.link");
data_3_2_3_1 = new Option("All color","http://special.link");
data_3_2_3_2 = new Option("Color 1","http://special.link");
data_3_2_3_3 = new Option("Color 2","http://special.link");
data_3_3_1_1 = new Option("All color","http://special.link");
data_3_3_1_2 = new Option("Color 1","http://special.link");
data_3_3_1_3 = new Option("Color 2","http://special.link");
data_3_3_2_1 = new Option("All color","http://special.link");
data_3_3_2_2 = new Option("Color 1","http://special.link");
data_3_3_2_3 = new Option("Color 2","http://special.link");
data_3_3_3_1 = new Option("All color","http://special.link");
data_3_3_3_2 = new Option("Color 1","http://special.link");
data_3_3_3_3 = new Option("Color 2","http://special.link");
// other parameters
displaywhenempty="";
valuewhenempty=-1;
displaywhennotempty="-select-";
valuewhennotempty=0;
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1;
// I empty all combo boxes following the current one
while (document.getElementById("combo_"+i)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1; m>0; m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty);
i++;
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data';
i=0;
while (document.getElementById("combo_"+i)) {
stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
if (i==currentbox) break;
i++;
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1;
if (document.getElementById("combo_"+following)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_";
i=0;
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
son.options[0]=new Option(displaywhenempty,valuewhenempty);
else
son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
else
son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
i++;
}
//son.focus()
i=1;
combostatus='';
cstatus=stringa.split("_");
while (cstatus[i]) {
combostatus=combostatus+cstatus[i];
i++;
}
return combostatus;
}
}
function go(elementName){
var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
if(newUrl.indexOf("http://")>=0){//rudamentary url checker! So don't go to a blank page if select box not populated.
location.href=newUrl;
}
}
//-->
</script>
</head>
<body>
<form>
Model:
<br />
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">All Models</option>
<option value="value3">Model 1</option>
<option value="value4">Model 2</option>
</select>
<br />
Type:
<br />
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Size:
<br />
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Color:
<br />
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
<br />
<input type="button" value="Go" onclick="go('combo3')">
<!-- could be changed for onchange event handler on select box -->
</select>
</form>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>
But I need to when you first start the script immediately showed the first value and its associated down decaying values without - select - immediately show combo first values All Models All Types All Sizes All Сolor (and after next for various behaviors the user's manipulation choice) **Or are there any other JS solutions that satisfy my request I would be grateful for any aid.... I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that. Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly. Any help is greatly appreciated. thank you Hello, I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters. Here is what I have so far: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_1_3 = new Option("13", "-");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_2_1 = new Option("121", "*");
data_1_3_1 = new Option("131", "*");
// fourth combo box
data_1_1_1_1 = new Option("1111","%")
data_1_1_1_2 = new Option("1112","%")
data_1_2_1_1 = new Option("1211","%")
data_1_3_1_1 = new Option("1311","%")
data_1_3_1_2 = new Option("1312","%")
data_1_3_1_3 = new Option("1313","%")
// fifth combo box
data_1_1_1_1_1 = new Option("11111","%")
data_1_1_1_1_2 = new Option("11112","%")
data_1_1_1_2_1 = new Option("11121","%")
data_1_1_1_2_2 = new Option("11122","%")
data_1_1_1_2_3 = new Option("11123","%")
data_1_1_1_2_4 = new Option("11124","%")
data_1_2_1_1_1 = new Option("12111","%")
data_1_3_1_1_1 = new Option("13111","%")
data_1_3_1_2_1 = new Option("13121","%")
data_1_3_1_2_2 = new Option("13122","%")
data_1_3_1_2_3 = new Option("13123","%")
data_1_3_1_2_4 = new Option("13124","%")
data_1_3_1_2_5 = new Option("13125","%")
data_1_3_1_3_1 = new Option("13131","%")
data_1_3_1_3_2 = new Option("13132","%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<table style="width: 49%">
<tr>
<td style="width: 200px">Option 1:</td>
<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="none">-select-</option>
<option value="1">1</option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 2:</td>
<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 3:</td>
<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 4:</td>
<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 5:</td>
<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
</table></form>
This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated. Thanks in advance. I have a status page on my website, but I have multiple servers, and they cramp up the one page. I was wondering if it was possible if I could have a link that says "CSS Server Status" and it drops down with the code for the CSS server, and say for "SAMP Server Status" drops down with the code/html for the samp server. I haven't a clue about Javascript, so as much help as possible would be appretiated. Hello, I am very new to HTML. Yesterday I have started learning HTML. I want to make two Dropdown but should be linked with each other. There value should change after click "go" button. In other word I want to make one html for Post Code/Pin Codes of my state. Please Help Me!!! I have made script till he <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>PIN CODES OF GOA</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700;width:100px;text-align:top;"> <b>GOA</b><br /> BEACHES<br /> CHURCHES<br /> BARS </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> </body> </html> </body> <form> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value=VASCO</option> <option value=FATORDA</option> </select> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="403802"</option> <option value="403602"</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> <script type="text/javascript"> tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December"); function GetClock(){ d = new Date(); nday = d.getDay(); nmonth = d.getMonth(); ndate = d.getDate(); nyear = d.getYear(); nhour = d.getHours(); nmin = d.getMinutes(); nsec = d.getSeconds(); if(nyear<1000) nyear=nyear+1900; if(nhour == 0) {ap = " AM";nhour = 12;} else if(nhour <= 11) {ap = " AM";} else if(nhour == 12) {ap = " PM";} else if(nhour >= 13) {ap = " PM";nhour -= 12;} if(nmin <= 9) {nmin = "0" +nmin;} if(nsec <= 9) {nsec = "0" +nsec;} document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; setTimeout("GetClock()", 1000); } window.onload=GetClock; </script> <div id="clockbox"></div> </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Search Your Post Code</td> </tr> </table> Hi, I've currently got a group of dropdowns that update a price total on my site. I want to add an 'add to cart' button too but this requires each drop down having 2 values (one to update total and one to go towards the 'add to cart button'). I've researched this but still have no idea how to go about getting 2 values from one dropdown though. What I've done is create an explanation page where I have one form for the running total, and then a completely seperate form for the add to cart. Both work independanly, but I want to effectively combine them. Here's the page: tigerfrog.co.uk/merge_codes.html code for running total is: Head Code: <script language="JavaScript" type="text/javascript">
function calc2(){
var totalStr = ''; // for testing only
var totalValue=0;
var DDL;
var cnt = 0; // for testing only
for (var j=1; j<=2; j++) {
DDL = document.getElementById('dropDownList'+j);
temp = DDL.options[DDL.selectedIndex].value;
totalValue += Number(temp);
if (DDL.selectedIndex != 0) { totalStr += '|'+temp; cnt++; } // cnt++ is for testing only
}
document.forms[0].total.value=totalValue;
}
</script>
Body Code: <form id="dropDownForm2" name="dropDownForm2"> <td class="style14"> <select id="dropDownList1" class="style10" name="D10" onchange="calc2();"> <option selected="" value="10">item1</option> <option value="20">item2</option> <option value="30">item3</option> </select> <br /> </td> <td class="style14"> <select id="dropDownList2" class="style10" name="D11" onchange="calc2();"> <option href="alloy.htm" selected="" value="11">item4</option> <option value="12">item5</option> <option value="13">item6</option> </select><br /> total </td> <input class="style10" name="total" onfocus="blur()" readonly="" size="4" style="width: 46px; height: 22px;" type="text" value="958" /></form> The code for the add to cart is: Code: <form action="http://www.romancart.com/cart.asp" method="post"> <input name="storeid" type="hidden" value="43579" /> <input name="itemcode" type="hidden" value="TF Series" />Frameset <select name="itemname2"> <option value="TF100" value="TF100">item1</option> <option value="TF300C" value="TF300">item2</option> <option value="TF400C" value="TF400">item3</option> </select><br /> Groupset <select name="itemname5"> <option value="SL T1" value1="SL T1">item4</option> <option value="SLR T1" value1="SLR T1">item5</option> </select><br /> <input type="submit" value="Add to basket" /> </form> If I had 2 values from each drop down in the first group of dropdowns then I could get it working, but I'm not sure how to do this. Any help will be great, Phil Hi, I have mutiple dropdowns in my HTML table in one of the columns.The dropdowns have three values 'Blank','Approve' and 'Reject'.What I want is when user changes the values in any of the dropdown,It will ask for the confirmation from user.If user click OK ,it will change the value in dropdown and calls another function else it will be reset to previous value.e.g, Suppose previous value is 'Reject' and user tries to change it to 'Approve'.When confirm window comes up and user clicks cancel it will reset to Reject.On OK it will change to 'Approve'. How can I handle this in Javascript? Please help. Thanks, Anil I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear... Ex: If I had three properties in Spain, ----------------------------------------------------------------------------------------------------------- | -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- | | -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- | | -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- | | -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- | ----------------------------------------------------------------------------------------------------------- it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella Can anyone please help? I need it very much... Thanks in advance! I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi, Ive been days searching posting, trying to find a solution to my pure css hover menu that works perfect, except in toucscreens. Ive been today to apples shop to test, and yes sometimes it opens on click other it wont open, something strange. So the best is to serve another menu to toucsreens such as smartphones and tablets, or make the menu work on both. I have tried my menu (Peterneds whateverhover) but cant manage, also have no touchscreen to do tests on. Searching I found Suckerfish Dropdowns and the dropdown have a script for ie6 as ie6 does not support hover. This is the script: Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
I wonder, isnt it posible to change the onmouseover and onmouseout to touchstart and touchend? I imagine that sounds just to easy, suppose if that were the case it would already been done, however I read that touchstart is for iphone etc... Any help please, I do understand javascript when I read it, but am not able to do my own functions. Thanks Helen I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C. Practical Example: User chooses "London" in the first dropdown and "Middle Schools" in the second. Result returns the middle schools I've listed for London. How can this be done or if it can't, is there another way to achieve what I want? -edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes However, now my question is what would I put in for the form "action" to populate the results? Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? |
|||||||