₦airaland Forum

Hello there!
I am a web developer - just started learning though. I am presently creating an information system using SQL database. I have built the application in Visual Studio using Asp.net. I have entered some data in my database and I want some of the options or data to come up automatically in a field when I select a particular option from another field. For example, when I run my program and I select car as an option in the VEHICLE field, the BRAND field should be able to generate automatically from the database and allow the user to choose. If I select MOTORCYCLE as the vehicle then different brands of the motorcycle should be able to automatically generate in the BRAND field. There is already a relationship between the two fields and dependency as well. I was meant to understand that it can be achieved using JavaScript but I don't know how. Please anyone with an idea should help me out.

YES, a javascript library JQuery will do the work using its ajax method or better still using javascript XMLHTTPREQUEST OBJECT.
if you using ajax, you will have to listen to an event , in your case when the selected value changes , then you send the variable name via AJAX to display values by making calls to your database to display information matching what was selected.

an example is below, make sure you have jquery installed or linked on your webpage from a CDN.

<script>
$( document ).ready( function(){
var selected = "listen to an event( check for your event here )";
$.ajax: {
action: "link to your php file where response will be availabe ( database querries here )";
'product name' : selected; //pass the variable selected in the field>
}

//display the response
function devx_ajax_response(response){
document.getElementById('brand').HTML= response;
}
});
</script>

I hope this walks you through and helps.

if you need a full script written for you , email webdeveloperqx@gmail.com or put a call to : 09092882430.

happy coding.

VANILLA JAVASCRIPT

Copy the code below and save it in a [dot]html file and see exactly how it works.
I believe this will give you a good understanding of the process.

change the selected item to see an example<br>
<select name="vehicles" onchange="display_brands(brands = ['camry','bmw','volvo','benz']);"> 
<option value="#" label="default" selected> select</option>
<option value="cars" label="cars">cars</option>
<option value="motocycle" label="motocycle">motocycle</option>
<option value="tricycle" label="tricycle">tricycle</option>
</select>

<select name="brands" id="brands" onchange="what you choose to do here depends on you">
<option value="#" label="default" selected> select</option>
</select>

<br>
your database returns an array of brands from the chosen category and then pass it as an argument to the 
display brands function.
now assume $brands holds the array, you can parse it through JSON 
or whatever you are convenient with 

<script>
function display_brands(input) {

	var brands = input; //<== brands becomes an array object...then;
	document.getElementById('brands').innerHTML = '';
	var i;
	
	//Note: for php this would have been a foreach loop
	for(i=0; i< brands.length; i++)
	{
		var output = document.createElement("option";
		output.value = brands[i];
		output.label = brands[i];
		var t = document.createTextNode(brands[i]);
		output.appendChild(t);
		document.getElementById('brands').appendChild(output);
	}
}
</script>