Ajax passing php variable to javascript function as an argument

Question

I have three tables in my database: Person (id, name, last_name), System (id, name), PersonInSystem(id, person_id, system_id) . The last one is used to link a person with a system.

I use <select> to display every person from my DB like this

echo '<option value="'.$queryResult["id"].'">'.$queryResult["name"].' '.$queryResult["last_name].'</option>';

I use Ajax to get the id and to send a query SELECT * FROM Person WHERE id = ID_FROM_SELECT . Then, I display the data like this (I can't copy the code, so I have to rewrite it from head, I will use pseudo PHP + HTML), and the main purpose of it is to edit a chosen person:

<form>
Name: <input type="text" value="'.$nameFromDB.'" name="name">
Last name: <input type="text" value="'.$lastNameFromDB.'" name="lastname">
System: while () { // if one person is assigned to many systems, I will display them all in separate selects
            <select><option value="'.$systemAssignedToPerson.'">'.$systemAssignedToPerson.'</option>
            while () {
            // display every system except for the one listed above
            }
            </select><img src="drop.gif" onclick="deleteSystem(document.getElementById(\"system\").value)"><input type="hidden" id="system" value="'.$systemAssignedToPerson.'"> 
        }

<input type-"submit" value="Edit" name="editPerson">
</form>

Now if I want to unassign a person from given system, I would like to click the drop.gif image and trigger deleteSystem(value) function, which will send query DELETE FROM PersonInSystem WHERE system_id = SYSTEM_ID_SENT and person_id = PERSON_ID_SENT , but I can't pass the value and I don't have really idea how to do it (I'm new with Ajax).

I can store person's id in a session variable, but I don't know how to send system id, and also I don't want to sent the data to another page.

Also I would like to refresh the page with changed system assignment (the same person should be displayed).

Answer 1

I think you need native javascript function call to the server

function deleteSystem(value){  
    var deleteflag=confirm("Are you sure to delete?!!");
      if(deleteflag){
        //setup your request to the server
         window.location='delete.php?SYSTEM_ID_SENT='+value

       }

    } 

In your delete.php file you can get the SYSTEM_ID_SENT in this way

 $id=$_GET['SYSTEM_ID_SENT'];
 $personid=$_SESSION['your session variable name'];
// run your delete query
 $delqry=mysql_query("");
 if($delqry){
      //redirect to the page you want
      header('location:yourpage.php');
  }

Answer 2

Change the code as below. It should work

<img src="drop.gif" onclick="deleteSystem('<?php echo $systemAssignedToPerson;?>')">

Answer 3

Your deleteSystem JavaScript function needs to send the following kind of request to the server:

(Example: Handler file for unassign)

"unassign.php?systemId=459&personId=300"

(Example: Generic handler file)

"handler.php?systemId=459&personId=300&action=unassign"

In unassign.php:

$systemId = $_GET["systemID"];
$personId = $_GET["personID"];
/* Your SQL stuff here - 
statement something like 
DELETE FROM PersonInSystem WHERE person_id = "$personId" AND system_id = "$systemId" */

Improvements: * Use a javascript library like Prototype (oldschool, lightweight) or jQuery (more heavy) for handling the Ajax stuff * Use $_POST and post variables instead of $_GET * Use a library for properly quoting your SQL * Care about html special characters and proper input validation/filtering