Help with functions and arguments

Hi all,

I am trying to pass some dynamic values for use with javascript or more specifically AJAX...

I had a set up looking something like the following;

<input type="button" onclick="ajaxFunction()" value="Add Favourite"/>
<input type="text" name="school_id" id="school_id" value="<?php echo $school_id; ?>" />
<input type="text" name="teacher_id" id="teacher_id" value="<?php echo $teacher_id; ?>" />

<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 and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var school_id = document.getElementById('school_id').value;
var teacher_id = document.getElementById('teacher_id').value;

var queryString = "?sid=" + school_id;
queryString += "&tid=" + teacher_id;
alert(queryString);
ajaxRequest.open("GET", "ajax_insert_favourite.php" + queryString, true);
ajaxRequest.send(null);

}
//-->
</script>

however because it is possible for there to be more than one button, i.e. many teachers can be returned the javascript would also output 1 and 1.

I need someway of making this unique to the id's... I think that passing arguments/params might be the solution but I'm having a hard time implementing it;

I've tried the following;

<input type="button" onclick="ajaxFunction('school_id','teacher_id')" value="Add Favourite"/>

<!--
//Browser Support Code
function ajaxFunction(school_id,teacher_id){

But once I do this, it no longer even make the call.

Can anyone advise here, I'm a relative newbie to javascript/AJAX etc.

Many thanks,

Greens85

You are using school_id and teacher_id for 3 different things:
The elements ID's
The identifiers for the passed variables
and for the in-function defined variables

Though it doesn't seem to whats causing the trouble in this case, it can be very hard to remember, what is what.
A good thing is to make some differences between the names.
e.g.:
The ID's with Initial caps<input type="button" onclick="ajaxFunction('School_Id','Teacher_Id')" value="Add Favourite"/>
The identifiers in lower-casefunction ajaxFunction(school_id,teacher_id){and the variables in upper-case var SCHOOL_ID = document.getElementById('school_id').value;
var TEACHER_ID = document.getElementById('teacher_id').value;

var queryString = "?sid=" + SCHOOL_ID;
queryString += "&tid=" + TEACHER_ID;


beside that, the only problem I can see is that though you passed the id's to the function you are using predefined id's when creating the variables:var SCHOOL_ID = document.getElementById('school_id').value;
var TEACHER_ID = document.getElementById('teacher_id').value;
change it so it refers to the identifiers instead:var SCHOOL_ID = document.getElementById(school_id).value;
var TEACHER_ID = document.getElementById(teacher_id).value;