Need help finding a simple javascript code.

abcde · 01-09-2011, 02:01 AM

I am working on a submit form with 2 combo-boxes. But I want the result on box 2 to be based on what submitters select from box 1.

ex: If I select "Japanese Cars" from box 1, then I want to see "Toyota, Honda, Nissan.." on box number 2. If i select "American Car" from box 1, then i wanna see "Ford, Chevy, Cadillac.." on box 2.

I now we can only do this with javascript, ajax or something but I cant seem to find them on google.

Can somebody please help?

I'll send you 200 $NP if the code works. Thanks

baxter · 01-09-2011, 08:26 AM

Assuming use of jQuery framework, jquery.com.

Totally untested, not interested in the $NP but should give you a starting point.

Code:

var form = $('#yourformid');
var select1 = $('#your1stselectid');
var select2 = $('#your2ndselectid');

var options = {
  japan: ['Toyota','Honda','Nissan'],
  american: ['Ford','Chevy','Cadillac']
};

select1.change(function() {
   if (undefined != options[this.value]) {
      select2.children().remove();
      $.each(options[this.value],function(car) {
         $('option', {
            name: car.toLowerCase(),
            value: car
         }).appentTo(select2);
      });
   }
});

abcde · 01-09-2011, 03:26 PM

Can you please write that code above with a simple form? I don't know how to make it work.

Skeeter · 01-09-2011, 03:47 PM

What programming language and framework are you using? Assuming since NP isn't .net centric you are using PHP. If you are by chance using vb.net or c#.net let me know and I can provide some code. I am not a php guy but I can tell you that to do this right you need to implement AJAX postbacks. good luck

un4given[MAD] · 01-09-2011, 09:28 PM

This is very simple (and not so perfect) example, but it should give you a clue. There is no need to use jQuery or any other framework for solving such a simple task.

All you need is to initialize arrays groups and cars. If you have any questions, please feel free to ask

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example</title>
<script type="text/javascript">

groups = [
//	 id   name
	["0", "Japanese Cars"],
	["1", "American Cars"]	//please note, that you don't need a comma in this line (last)
];

cars = [
//	 name1     name2    name3 ...
	["Toyota", "Honda", "Nissan"],	//0
	["Ford", "Chevy", "Cadillac"]	//1
];

function _e(objID)
{
	return document.getElementById(objID);
}

function clearSelect(select)
{
	for (var i=select.options.length-1; i >= 0; i--)
	{
		select.remove(i);
	}
}

function addSelectOption(parent, text, value)
{
	var newOption = document.createElement("option");
	newOption.appendChild(document.createTextNode(text));
	newOption.setAttribute("value", value);

	parent.appendChild(newOption);
}

function buildGroupsList()
{
	var s = _e('group');
	clearSelect(s);

	for (var i=0; i<groups.length; i++)
	{
		addSelectOption(s, groups[i][1], groups[i][0]);
	}
}

function buildCarsList()
{
	var group = _e('group').value;
	var s = _e('car');
	clearSelect(s);

	for (var i=0; i<cars[group].length; i++)
	{
		addSelectOption(s, cars[group][i], cars[group][i]);
	}

}

function initForm()
{
	buildGroupsList();
	buildCarsList();
}

</script>
</head>

<body onLoad="initForm();">

<form name="example" id="example" action="" method="post">

<select id="group" name="group" onChange="buildCarsList()">
</select><br />
<select id="car" name="car">
</select><br />
<input type="submit" value="submit!">

</form>
</body>
</html>

abcde · 01-10-2011, 03:28 AM

Thanks!! It works wonder.

baxter · 01-10-2011, 09:44 AM

@un4given[MAD] I agree its just been so long since I've used pure js that it would have been more of a choire then a simple write up.

Cheers,

Jay

01-09-2011, 02:01 AM	THREAD STARTER #1 (permalink)
abcde NamePros Regular Join Date: Feb 2005 Posts: 578	Need help finding a simple javascript code. I am working on a submit form with 2 combo-boxes. But I want the result on box 2 to be based on what submitters select from box 1. ex: If I select "Japanese Cars" from box 1, then I want to see "Toyota, Honda, Nissan.." on box number 2. If i select "American Car" from box 1, then i wanna see "Ford, Chevy, Cadillac.." on box 2. I now we can only do this with javascript, ajax or something but I cant seem to find them on google. Can somebody please help? I'll send you 200 $NP if the code works. Thanks __________________ Freebies and Giveaways - Printable Coupons - Hot Deals - Coupons - Deal of the Day

01-09-2011, 03:26 PM	THREAD STARTER #3 (permalink)
abcde NamePros Regular Join Date: Feb 2005 Posts: 578	Can you please write that code above with a simple form? I don't know how to make it work. __________________ Freebies and Giveaways - Printable Coupons - Hot Deals - Coupons - Deal of the Day

01-09-2011, 03:47 PM	#4 (permalink)
Skeeter NamePros Member Join Date: Mar 2008 Posts: 61	What programming language and framework are you using? Assuming since NP isn't .net centric you are using PHP. If you are by chance using vb.net or c#.net let me know and I can provide some code. I am not a php guy but I can tell you that to do this right you need to implement AJAX postbacks. good luck __________________ ~Skeeter~

01-10-2011, 03:28 AM	THREAD STARTER #6 (permalink)
abcde NamePros Regular Join Date: Feb 2005 Posts: 578	Thanks!! It works wonder. __________________ Freebies and Giveaways - Printable Coupons - Hot Deals - Coupons - Deal of the Day

01-10-2011, 09:44 AM	#7 (permalink)
baxter NamePros Regular Join Date: Apr 2006 Posts: 360	@un4given[MAD] I agree its just been so long since I've used pure js that it would have been more of a choire then a simple write up. Cheers, Jay __________________ Canadian Domain Registrar Ready.ca

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
► CLEARANCE ► 113.biz + 103 NNN.biz ► Country/Area Codes ► Repeating/Alternating #s	InfoGuy	Domains For Sale - Fixed Price	1	08-16-2010 02:35 PM
simple css comment code	gafadi	Programming	1	02-04-2010 04:05 PM
Breaking News: Sedo Auction 3 To Be Re-run In January 2008	Pred	Dot MOBI	76	12-24-2007 11:53 AM
For people who paid for the 3rd SEDO auction	connections	Dot MOBI	70	12-20-2007 06:03 PM