AJAX Button, how can I pass a var? Help appreciated.

[clowes]

Ok I am new to javascript, and AJAX and am literally playing around to get things to work for specific things.

My setup is as follows.
I have a list of items which I have grabbed from a mysql database, e.g apple, pear, banana, orange, lemon. Each is a button, with the image of the respective item.

I have set up the javascript so that onclicking the button a php file called deleteitem.php is called which contains the code to delete the item.

deleteitem.php literally has a mysql query DELETE where ID='1' it works perfectly , and deletes the item with ID 1 on clicking one of the buttons.

What I want is to pass a variable to the deleteitem.php script containing the ID of the item I want to delete. The intention is that each button deletes its respective item, whereas at the moment all the buttons delete the same item (and the ID has to be set in deleteitem.php).

Is this doable? and how?

Many Thanks
T

[Dal]

be aware that IE doesnt pass values if your using image buttons.

[clowes]

Well Im just not sure how to do it in general... Ill simply use images (<img tags ) but how can I tell the PHP script WHICH image ive clicked on?

[Dal]

You need to use AJAX to pass the id. I would recommend just using the $_GET method, its easier to setup. AJAX is called via a js function you place on the button either by an event listener or by the old method of onclick. Ive used onclick and it works fine but its much easier to script than the event listener method.

In your php script your just need to test for the query string coming through and then perform the action based on the id number you've sent.

So your ajax might point to the script deleteitem.php with the id from one of the click button. eg. deleteitem.php?id=12

inside the php script deleteitem.php you would have;

if(isset($_GET['id'])) calldelete($_GET['id']);

function calldelete($id2delete)
{
...your code...
}

[clowes]

You need to use AJAX to pass the id. I would recommend just using the $_GET method, its easier to setup. AJAX is called via a js function you place on the button either by an event listener or by the old method of onclick. Ive used onclick and it works fine but its much easier to script than the event listener method.

In your php script your just need to test for the query string coming through and then perform the action based on the id number you've sent.

So your ajax might point to the script deleteitem.php with the id from one of the click button. eg. deleteitem.php?id=12

inside the php script deleteitem.php you would have;

if(isset($_GET['id'])) calldelete($_GET['id']);

function calldelete($id2delete)
{
...your code...
}

I completely understand the latter part of your explanation, I.E how to use the id when you have it in the php script as .php?id=12

Ive been using this tutorial to guide me:
http://www.tizag.com/ajaxTutorial/aj...ttprequest.php

Each button is <input type='button' onclick='ajaxFunction()'>
That runs the ajax which in turn calls deleteitem.php
I still dont understand however how I pass a specific ID to the php file

Thanks

[Dal]

thats because you havent got to that part yet in the tutorial;

http://www.tizag.com/ajaxTutorial/aj...l-database.php

at this point is where you can call ur script and apply the query string;

var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);

[clowes]

thats because you havent got to that part yet in the tutorial;

http://www.tizag.com/ajaxTutorial/aj...l-database.php

at this point is where you can call ur script and apply the query string;

var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);

No, I have gotten that far, Ive read the whole thing.
Its just that Im using a php while loop to output all the items, and each of the buttons are named as part of an array e.g item[0].

In the example there is a set field called age, and you get the value of the field... in my case there are numerous fields, and you dont know which one is being clicked...

[Dal]

In that case, why dont you paste your code so I can see whats going on?

Thanks
Dal

[clowes]

Ok this is the main page which grabs the items from a database using the a PHP object previously defined ($battle).

if($batt["playerstage$battle->userplayer"]=='TURN'){
$battle->location='HAND';
$yours=$battle->getallcards();
echo"<div id='ajaxDiv'>";
while($yourhand=mysql_fetch_array($yours)){
$name=$battle->getdetails($yourhand[cardid]);
echo"<form name=hand><input type=hidden name=cid value=$yourhand[ID]><input type=button name='card' value='$yourhand[ID]' onclick='ajaxFunction();'></FORM>";
}

if ($battle->count>'7'){echo"<br>You can only have 7 cards in your hand at any one time.";}
}
echo"</div>";

?>
<html>
<body>

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



    ajaxRequest.open("GET", "discardcard.php", true);
    ajaxRequest.send(null); 
}

//-->
</script> 

The deleteitem.php page looks like this

<?php
include"cards2.php";
$b=rand(1,100);
echo"Card Discarded $b";

$battle=new battle;
$battle->ucardid='1';
$battle->location='DECK';
$battle->movecard();
$battle->location='HAND';
$yours=$battle->getallcards();
echo"<div id='ajaxDiv'>";
while($yourhand=mysql_fetch_array($yours)){
$name=$battle->getdetails($yourhand[cardid]);
echo"<form name=hand><input type=hidden name=cid value=$yourhand[ID]><input type=button name='card' value='$yourhand[ID]' onclick='ajaxFunction();'></FORM>";
}

if ($battle->count>'7'){echo"<br>You can only have 7 cards in your hand at any one time.";}
echo"</div>";

?>
<html>
<body>

This works in that onclicking a button it deletes the item from the database with id 1 per this line:

$battle->ucardid='1'; 

What I want however is to pass a variable so that onclicking a specific button, it deletes that specific item.

Cheers

[Dal]

value='$yourhand[ID]' onclick='ajaxFunction({$yourhand[ID]});'>

then

function ajaxFunction(CardID){
...

var QString = "?card"+CardID;
ajaxRequest.open("GET", "discardcard.php"+QString, true);


Then in your php


collect the value by running a $_GET['card']; this will equal the id passed

Pass this value along to the delete function which I havent looked for but Im sure you'll be on the right track after this.


Best of luck
Dal