Help with functions and arguments

greens85 · 08-03-2011, 11:22 AM

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;

Code:

<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; ?>" />

Code:

<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;

Code:

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

Code:

<!-- 
//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

Lerura · 08-03-2011, 03:27 PM

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

Code:

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

The identifiers in lower-case

Code:

function ajaxFunction(school_id,teacher_id){

and the variables in upper-case

Code:

 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:

Code:

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:

Code:

var SCHOOL_ID = document.getElementById(school_id).value;
 var TEACHER_ID = document.getElementById(teacher_id).value;