Learn VBA & Macros in 1 Week!

JavaScript - Ie9 Breaks Dynamic Select Boxes

Full Excel VBA Course - Beginner to Expert

Ie9 Breaks Dynamic Select Boxes	View Content

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

Thank you in advance for any help provided.

Full Excel VBA Course - Beginner to Expert

Customizing Dynamic Select Boxes

Similar Tutorials

View Content

Hi all,
I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent.

You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html

In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries.

I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded?

Modification Of Multiple Dynamic Combo Boxes

Similar Tutorials

View Content

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....

Multiple Sets Of Dynamic List Boxes

Similar Tutorials

View Content

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

Javascript Select Boxes

Similar Tutorials

View Content

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++;

        }

    }

Need Help. Javascript Select Boxes Using Arrays

Similar Tutorials

View Content

I'm trying to do this using numerical arrays for an assignment:

Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale.

I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated?

<html>

<head>
<script type="text/javascript">

</script>
</head>

<body>

<form>
<select id="theSport" onChange="fillTeams()">
<option>Choose a Sport</option>
<option>Basketball</option>
<option> Baseball </option>
</select>
<select id="theTeams" onChange="fillPlayers()">
<option>................</option>
<option></option>
<option></option>
</select>
<select id="thePlayers" size="3">
<option> ...............</option>
<option></option>
<option></option>
</select>
</form>

</body>

</html>

2 Select Boxes In 1 Form With Onchange Display

Similar Tutorials

View Content

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

Javascript Select Boxes, Onchange Event Help

Similar Tutorials

View Content

Hello,

I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms.

So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event.

Here is my code (this is a proof of concept and highly stripped down):
Code:

<html>
<head>
</head>
<body>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    var array = [ 'name', 'age', 'year'];

    function init(sel_val){
        for (var i = 0; i < array.length; i++){
            document.write(i + " " + array[i] + "<br />");
        }

        for (var i = 0; i< array.length; i++){
            document.product.id_type.options[i] = new Option(i + array[i], i);
        }
    }


    function OnChange(sel_val) {
//         for(i = document.product.id_style.length - 1; i > 0; i--)
//                document.product.id_style.options[i]    = null;
//        document.product.id_style.options[0] = new Option("something else", 15);
          alert("pressed" + " " + sel_val + "<br />");
    }

    </script>


<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>

        <select name="id_style" size="5" style="width: 150px;" ></select>
    </form>
    <script>
            init();
    </script>



</body>
</html>

I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy.

I understand that sel_val is not being set, but I'm not sure how it should (or could) be set.

I would like to use a hash instead of integer values for `i`

document.product.id_type.options[i] = new Option(i + array[i], i);

becomes

document.product.id_type.options[i] = new Option(hash[key], key);

Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist.

Chained Select Boxes Issue On Back Button

Similar Tutorials

View Content

Hello to all and thank you for any help beforehand.

I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct.

I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script.

Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select

Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js

test.html
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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

Here's the content of getCities.php
Code:

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

Extracting Values From Select Boxes And Summing The Result

Similar Tutorials

View Content

Hello,

I'm working on a project that involves extracting values from a series of select boxes and then working out the result.

The select boxes contain the following:
Code:

<select name="select_Col1_Row1">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<select name="select_Col1_Row2">
<option value="blue" selected="selected">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<input type="text" name="RedSum">
<input type="text" name="BlueSum">
<input type="text" name="GreenSum">
</select>

As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements...

Code:

<script type="text/javascript">
function getElements()
  {
  var table = document.getElementById("x");   
  var x = table.getElementsByTagName("option");
  for (var i = 0; i < x.length; i++) {   
    var status = x[i].getAttribute("selected");
	alert(status);
    if (status == "selected") {
      var statushcap = x[i].getAttribute("id");
      var statusvalue =x[i].getAttribute("value");
      if (statusvalue == "blue") {
        alert(statusvalue);
      }
    }

  }
  
  alert(x.length);
  }
</script>

If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice.

Best,

John

Program In Javascript To Select Multiple Text Boxes

Similar Tutorials

View Content

hi ! i would like to write the code for multiple text box select as shown in the link below:

http://www.downloadplex.com/Mobile/I...ne_284120.html

please see the screen shot 3

Help With Dynamic Select Box Error

Similar Tutorials

View Content

Hello all! I am hoping for some coding help as I have been trying to figure out my problem for a couple of days without resolve. I am new to Javascript so this is just test code that eventually will go into a larger project. Here goes:

I have a form that initially creates two select boxes. The 2nd select box option values are determined onchange of the first boxes value using mysql to pull the data from a database. That all works fine.

I also have an add button that adds a second set of select boxes dynamically and assigns names and values, etc. This also works fine. My goal is to have the 2nd set of select boxes act the same as the first so that when an option is chosen in the first box the 2nd dynamically populates. This does not work. The first box is created fine but when it tries to create the values in the 2nd from an onchange event I have a problem.

This is the code that returns a valid object with the first set of select boxes but is null with the 2nd set.
Code:

var selbox = document.getElementById(exep);

The entire piece of spaghetti code is below. Any help is appreciated. Please be nice as I am still trying to figure out this Javascript stuff. Thanks for any help...

Code:

<html> 
<head> 
<title>Workout testing</title>  
    <SCRIPT language="javascript"> 
        function deleteRow(tableID) { 
            try { 
            var table = document.getElementById(tableID); 
            var rowCount = table.rows.length; 
  
            for(var i=0; i<rowCount; i++) { 
                var row = table.rows[i]; 
                var chkbox = row.cells[0].childNodes[0]; 
                if(null != chkbox && true == chkbox.checked) { 
                    if(rowCount <= 1) { 
                        alert("Cannot delete all the rows."); 
                        break; 
                    } 
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                } 
  
            } 
            }catch(e) { 
                alert(e); 
            } 
        } 
  
    </SCRIPT>
<script language="javascript">


function setOptions(chosen, form_num) {

var musc = "musc_"+form_num;
var exep = "exep_"+form_num;

//var str = '';
//        var elem = document.getElementById('form1').elements;
//        for(var i = 0; i < elem.length; i++)
//        {
//            str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp";
//            str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
//            str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
//            str += "<BR>";
//        } 

// document.getElementById('lblValues').innerHTML = str;

var selbox = document.getElementById(exep); 

  selbox.options.length = 0; 
  if (chosen == "0") { 
    selbox.options[selbox.options.length] = new Option('First select a muscle group','0'); 
    
  } 
  <? 
  $car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); 
  while(@($c=mysql_fetch_array($car_result))) 
  { 
  ?> 
    if (chosen == "<?=$c['muscle'];?>") {  
    <? 
    $c_id = $c['muscle']; ;
    $mod_result = mysql_query("SELECT exercise FROM work_exercise WHERE muscle='$c_id'") or die('Something is wrong: ' . mysql_error()); 
    while(@($m=mysql_fetch_array($mod_result))) 
    { 
    ?> 
      selbox.options[selbox.options.length] = new 
      Option('<?=$m['exercise'];?>','<?=$m['exercise'];?>'); 
    <? 
    } 
    ?> 
    } 
  <? 
  } 
  ?> 
} 
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function makeTable() {
//give the new table unique name
var form_num = document.getElementsByTagName("table").length;

	row=new Array();
	cell=new Array();

	row_num=1; //edit this value to suit
	cell_num=6; //edit this value to suit

	tab=document.createElement('table');
	var table_id = 'newtable_'+form_num;

	tab.setAttribute('id',table_id);

	tbo=document.createElement('tbody');

	for(c=0;c<row_num;c++){
		row[c]=document.createElement('tr');

		for(k=0;k<cell_num;k++) {
			cell[k]=document.createElement('td');
			//cont=document.createTextNode((c+1)*(k+1))
			//cell[k].appendChild(cont);
			row[c].appendChild(cell[k]);
		}
		tbo.appendChild(row[c]);
	}
	tab.appendChild(tbo);
	document.getElementById('mytable').appendChild(tab);
	changeBorder(table_id, form_num);
}

function changeBorder(table_id, form_num){
    document.getElementById(table_id).border="1";
	pop_cells(table_id, form_num);

}
function pop_cells(table_id, form_num) { 

	var table = document.getElementById(table_id); 
  
        var colCount = table.rows[0].cells.length;
	//create the first checkbox
	var selcheck = document.createElement("input");
	selcheck.type = "checkbox";
	selcheck.name = "chk[]";

	//create the first select box
	var selbox = document.createElement("select");	
	var musc_opt = "musc_"+form_num;
	selbox.name = "musc_"+form_num;
	selbox.id = "id_"+form_num;
	//var test_ops = javascript:setOptions(document.form1.'+musc_opt+'.options [document.form1.'+musc_opt+'.selectedIndex].value,'+selbox.name+');
	//selbox.setAttribute("onchange", function(){setOptions(test_ops);});
	selbox.onchange = function(){setOptions(this.value,form_num);};
	selbox.options[selbox.options.length] = new Option('Select a muscle group','0');  
	<? 
	$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); 
	while(@($c=mysql_fetch_array($car_result))) {
	?>
		selbox.options[selbox.options.length] = new Option('<?=$c['muscle'];?>','<?=$c['muscle'];?>'); 
	<? 
	} 
	?> 
	//create the 2nd select box
	var selbox2 = document.createElement("select");	
	selbox2.name = "exep_"+form_num;
	selbox2.id = "id_"+form_num;
	selbox2.size = "1";
	selbox2.options[selbox2.options.length] = new Option('First select a muscle group','0');  
	//<? 
	//$car_result = mysql_query("SELECT exercise FROM work_exercise") or die('Something is wrong: ' . mysql_error()); 
	//while(@($c=mysql_fetch_array($car_result))) {
	//?>
	//	selbox2.options[selbox2.options.length] = new Option('<?=$c['exercise'];?>','<?=$c['exercise'];?>'); 
	//<? 
	//} 
	//?> 	
	
	var target0 = table.rows[0].cells[0];
	var target1 = table.rows[0].cells[1];
	var target2 = table.rows[0].cells[2];
	// fire
	target1.appendChild(selcheck);
	target1.appendChild(selbox);
	target1.appendChild(selbox2);
} 

</script>
</head>
<body> 
<form name="form1"><div align="center">
    <INPUT type="button" value="Add Row" onclick="makeTable()" /> 
  
    <INPUT type="button" value="Delete Row" onclick="javascript:deleteRow(this)" /> 
    <TABLE id="newtable" width="350px" border="1"> 
        <TR><TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><select name="musc_0" size="1" 
onchange="javascript:setOptions(document.form1.musc_0.options 
[document.form1.musc_0.selectedIndex].value, 0);"> 
<option value="0" selected>Select a muscle group</option>
<? 
$result = mysql_query("SELECT * FROM work_muscle") or die(mysql_error()); 
while(@($r=mysql_fetch_array($result))) 
{ 
?> 
  <option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option> 
<? 
} 
?> 
</select></td>
<td> 
<select name="exep_0" size="1"> 
<option value=" " selected>First select a muscle group</option> 
</select></td></tr> 
</div></table><div id="mytable"></div><div id="lblValues"></div>
</form> 
</body> 
</html>

Dynamic Dropdownbox With Multiple Select

Similar Tutorials

View Content

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>



<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>

"multiple Dynamic Combo Boxes" Configuration

Similar Tutorials

View Content

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.

Building A Dynamic Select Menu From Values Selected In Other Fields

Similar Tutorials

View Content

Dynamic Form Or Div With Dynamic Subform Or Subdivs

Similar Tutorials

View Content

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

Dynamic Calculation For Dynamic Form

Similar Tutorials

View Content

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'>&pound;</option><option value='dol'>$</option><option value='euro'>&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'>&pound;</option><option value='dol'>$</option><option value='euro'>&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>&pound;</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

Forms: Select Options, Filtered By Another Select Option

Similar Tutorials

View Content

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Change Options Of Select Based On Selection In Other Select

Similar Tutorials

View Content

I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/

Add/remove Select Options Based On Another Select Value

Similar Tutorials

View Content

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

One Select List Updates All Select Lists

Similar Tutorials

View Content

Hey Guys
When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this.

<select size='1' onchange="updatecodes()" name='reason_code_master'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>