Ajax (and jQuery) causing problems.

[TeNDoLLA]

First of all I haven't been playing around a lot with javascript earlier. I have read tutorials from google and jQuery site concerning ajax & javascript without success. I have a scenario where I should populate form data based on earlier choices in this same form and then be able to submit the whole thing in the end.

So this is the scenario: I have one select field in form at the beginning (select1). In this select1 is listed some values from database. Then based on the option user chooses from select1 I should print another select (select2) under select1. Again information to select2 will be fetch from database based on the option on select1. Now after user chooses value from select2 I should again print more stuff under these two selects. This time some input fields and submit button. These input fields will get their names from database but user will have to fill them. So as a whole thing I will have in the end a form that will contain two selects, inputs and a submit button. The form should be able to be submitted in one piece.

I manage to do this with only one select (without jQuery) in the form but when there is two everything breaks down and I am lost. Need some pointers or example code how to handle this kind of situations, please.

If you can I would gladly see two different scenarios how to implement this:
1. without jQuery
2. and with jQuery.


best regards,
TeNDoLLA

[bradical1379]

Just shooting from the hip....

$("select").change(function () {
var item = $("select option:selected");
$.ajax({
type: "POST",
url: "index.php",
data: item,
success: oncomplete});
});

[TeNDoLLA]

Just shooting from the hip....

$("select").change(function () {
var item = $("select option:selected");
$.ajax({
type: "POST",
url: "index.php",
data: item,
success: oncomplete});
});

Okey. I am not really sure what or how this piece of code you wrote should get this thing done or not even sure what it actually does. Anyway I couldnt get anything to work with it not even the first select. Maybe you could explain line by line what it does?

After all I get the first select to work with this function:

function get_stuff(option_value, target_div, get_variable_name)
{
	//option_value = parseInt(option_value); // For numbers
	//phpscript gets the $_GET['get_variable_name']
	$.get("temp_ajax.php", { get_variable_name : option_value },
	function(data)
	{
		// here we set the div we want the data be placed by ajax request
		$('#'+ target_div).html(data);
	});
}

But now I have a problem when I want to use this function multiple times with different $_GET variables and different target_divs. Target divs are working fine but with this code I get everytime $_GET['get_variable_name'] -variable and what it should do is place the parameter get_variable_name's value to the $_GET variable. For example if I pass as a parameters get_stuff(this.value, 'mydiv', 'myGetVariable') then I want this function to pass $_GET['myGetVariable'] to the php script NOT $_GET['get_variable_name'].

[TeNDoLLA]

Got it working now. here is the working code for it:

function get_stuff(option_value, target_div, get_variable_name)
{
	var request_string = "&"+get_variable_name+"="+option_value;
	$.ajax({
		url: "temp_ajax.php",
		type: "GET",
		data: request_string,
		success: function(data) {
			// here we set the div we want the data be placed by ajax request
			$('#'+ target_div).html(data);
		}
	});
}