Add or remove data form database using ajax

JavaScript
1

Hello,

I want to build-up ajax based friends system. though i no nothing about ajax:sick: (would like to learn but) actually i have form where user can add his friend. on very next page of this page he/she can see what he/she is entered and where

they should probably see the add and remove button(which i want to build up using ajax)

can any one know how to start for this? till now i have code where user can write his friend name and to the next page he/she can see the value he has written. on submit button it all goes in to database. means i have devloped php form for this.if anyone want to see it please let me know.

so can anyone tell me how can i use ajax here?

thanks in advance.

2

Bulletproof Ajax is the resource for you.

The book is an excellent resource, and the website has all of the code, including demo pages all free for you to use, download and experiment with.

3

thanks pmw57,

i will go through the book.but i didnt find any similar code for my form. could you please give me similar code(similar links) which i want to build up?

4

I would like to show here my code:

php:

<?

var_dump($_POST);
if($_POST['submit'] == "submit")

{

$link = mysql_connect('xxx', 'xx', 'xx')
    or die('Could not connect: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('xx') or die('Could not select database');

// Performing SQL query
echo "connectivity is done";
echo $query = "INSERT INTO friends(myname,friend1,friend2,friend3,friend4,friend5) values ('".$myname."','".$friend1."','".$friend2."','".$friend3."','".$friend4."','".$friend5."')";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

// Printing results in HTML
if(mysql_affected_rows() > 0){

echo "this is result". mysql_affected_rows();


     }else{

       echo "this is no result";

     }
// Closing connection
mysql_close($link);
	        }else{
	        echo "values are not submiited";
	        }
	          // return $this;.


 // $myname = $_POST['myname'];

 // $friend1 = $_POST['friend1'];



?>

and the o/p is like with html

<html>

<head>

<body>
<form action="<?=$PHP_SELF;?>" method="post" name="productFrm">
<div class="row">
	<label for="name">MyName</label>
	<input type="text" name="myname" size="25" value="<?=$_POST['myname'];?> " readonly />
</div>
<!-- <h4>My friends</h4>	  -->


<br/>

<div class="row">
	<label for="friend1">1</label>
	<input type="text" name="friend1" value="<?=$_POST['friend1'];?>" size="25" /> &nbsp; &nbsp;<span class="col4"><input type="submit" name="submit" value="Add" class="button_style" onClick="javascript:return fmvalidate();" /></span> &nbsp; &nbsp;<span class="col4"><input type="submit" name="submit" value="Remove" class="button_style" onClick="javascript:return fmvalidate();" /></span>
</div>
<br/>
<div class="row">
	<label for="friend2">2</label>
	<input type="text" name="friend1" value="<?=$_POST['friend2'];?>" size="25" />&nbsp; &nbsp;<input type="submit" name="submit" value="Add" class="button_style" onClick="javascript:return fmvalidate();" /></span> &nbsp; &nbsp;<span class="col4"><input type="submit" name="submit" value="Remove" class="button_style" onClick="javascript:return fmvalidate();" /></span>
</div>
<br/>
</div>
</form>
</body>
</html>

on the click of Add or remove i want to change my database/insert my database values.

can anyone help me?

5

no reply.:frowning:

just wanted to ask this.can we actually do this.because i have been searching a lot related to this topic but couldn’t able to find out related to my query

generaly i found related links using php/ajax/mysql

  1. two select data
  2. other html application like showing images and all

so anyone here guide me.what i can do here?

thanks.

6

Here’s an example script that’s used on a photography website so a user can review photos online then check/uncheck a checkbox for which photos (s)he wishes to select.

function flipState (el) {
	if (el.checked) {
		el.checked = false;
	} else {
		el.checked = true;
	}
}

function flipCheckBox (cb) {
	nm = cb.name;
	var tcb = nm.substring (nm.indexOf ('_') + 1, nm.length);
	if (nm.indexOf ('b_') > 0) {
		var ncb = 'cbl_' + tcb;
	}
	if (nm.indexOf ('bl_') > 0) {
		var ncb = 'cb_' + tcb;
	}
	el = xGetElementById (ncb);
	flipState (el);

	tcb = tcb.substring (5, tcb.length);

	updateSelections (<?php echo $_SESSION['TempID'] ?>, <?php echo $pid ?>, tcb);
}

function updateSelections (cid, pid, tcb) {
	var xmlHttp;
	var resp = '';
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch (e) {
		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
				alert ('Your browser does not handle the photo selection process');
				return false;
			}
		}
	}
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			resp = xmlHttp.responseText;
			if (resp != 'OK') {
				alert ('There was a problem recording your photo selection request.');
			}
		}
	}

	// Send the info to the PHP handler page
	var data = 'updatephototemptable.php?cid=' + cid + '&pid=' + pid + '&tcb=' + tcb;

	xmlHttp.open ("GET",data,true);
	xmlHttp.send (null);
}

The above code is called from the checkbox like so …

<input type="checkbox" id="cb_photo1" name="cb_photo1" value="proj001/pic0001.jpg" onclick="flipCheckBox (this)" />

The PHP page simply reads in the querystring variables and does the database add/delete action.

This should give you some ideas.

PS - the xGetElementById reference is because that page uses X-Library. This is basically a belts-n-braces function to do document.getElementById.

7