how to submit triple dropdown result on same page

[dawg1]

<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.price.options[form.price.options.selectedIndex].value; 
self.location='dd3.php?price=' + val ;
}
function reload3(form)
{
var val=form.price.options[form.price.options.selectedIndex].value; 

var val2=form.weight.options[form.weight.options.selectedIndex].value; 


self.location='dd3.php?price=' + val + '&weight=' + val2 ;
}

</script>

<? 
--GET DATA HERE--
echo "<form method=post name=f1 action='dd3.php'>";
--DROP DOWN LISTS HERE--
echo "<input type=submit value='View'></form>";
?>

 

 

How can I change the script above so that the results will be returned on the same page?

 

Below is an AJAX function that can return the results to a div on the same page

 

AJAX Script:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var price = document.getElementById('price').value;
var weight = document.getElementById('weight').value;
var taxable = document.getElementById('taxable').value;
var queryString = "?price=" + price + "&weight=" + weight + "&taxable=" + taxable;
ajaxRequest.open("GET", "ajax_example.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

<div id='ajaxDiv'>Your result will display here</div>

 

 

I know there has to be a way to get what I need from these two functions, but I can't put it together!

 

Any help would be much appreciated!!!

 

Thanks!

[dawg1]

--------EDIT FOR INITIAL POST-------------(not sure why I can't modify the original post)

 

echo "<form method=post name=f1 action='dd3.php'>";

 

is actually

 

echo "<form method=post name=f1 action='dd3ck.php'>";

 

in my current code

 

 

 

<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.price.options[form.price.options.selectedIndex].value; 
self.location='dd3.php?price=' + val ;
}
function reload3(form)
{
var val=form.price.options[form.price.options.selectedIndex].value; 

var val2=form.weight.options[form.weight.options.selectedIndex].value; 


self.location='dd3.php?price=' + val + '&weight=' + val2 ;
}

</script>

<? 
--GET DATA HERE--
echo "<form method=post name=f1 action='dd3ck.php'>";
--DROP DOWN LISTS HERE--
echo "<input type=submit value='View'></form>";
?>

 

 

How can I change the script above so that the results will be returned on the same page?

 

Below is an AJAX function that can return the results to a div on the same page

 

AJAX Script:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var price = document.getElementById('price').value;
var weight = document.getElementById('weight').value;
var taxable = document.getElementById('taxable').value;
var queryString = "?price=" + price + "&weight=" + weight + "&taxable=" + taxable;
ajaxRequest.open("GET", "ajax_example.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

<div id='ajaxDiv'>Your result will display here</div>

 

 

I know there has to be a way to get what I need from these two functions, but I can't put it together!

 

Any help would be much appreciated!!!

 

Thanks!