Need help finding a simple Javascript code.

Namecheap AuctionsNamecheap Auctions
SpaceshipSpaceship
SpaceshipSpaceship
Watch

abcde

Established Member
Impact
16
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
 
0
Close
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
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);
      });
   }
});
 
0
Close
:( Can you please write that code above with a simple form? I don't know how to make it work.
 
0
Close
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
 
0
Close
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>
 
0
Close
Thanks!! It works wonder.
 
0
Close
@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
 
0
Close
DomainEasy: flexible LTO options. Close more domain deals with financing.

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Switch between accounts
You can now stay logged in to more than one NamePros account in the same browser. Click your avatar, then "Accounts in this browser", to...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back