0

Hi guys,

I need your help with PHP+AJAX example.

This is the scenario:
1. I enter my name into textbox and hit submit button in page index.php.
2. Data is POSTed to save.php to insert my name into mysql database.
3. With help of mysql_insert_id() function, save.php sends ID back to index.php to display it. Done.

Can I do this with help of PHP+AJAX to avoid page refreshing? If so is there any example to share with me? I’ve tried some examples in w3 and other sites but I failed.

Thanks in advance

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by diafol
0

Yes you certainly can do this. Although you haven't posted any code, I know you given it a good bash.

The submit event calls a js function (I use jQuery):

function login(){
	var nametoinclude = $('#nametoinclude').val();
	$.post("includes/myinclude.php", { "n2i": nametoinclude },
   	   function(data){
	     if(data.resultvalue == "success"){
               $("#displayarea").html(data.returnvalue);
             }else{
               alert("The name could not be stored in the DB");
             }
           },
        "json");
}

The nametoinclude var value is passed to the myinclude.php file as $_POST.
Just do your thing in the php file and then echo a bunch of values encoded in json format back to the js script (use json_encode() on an associative php array).

e.g.

$arr = array("resultvalue" => "$res", "returnvalue" => "$ret");
echo json_encode($arr);

Edited by diafol: n/a

0

Thanks ardav. It helped me a lot. Submit button in code below works fine but A link doesn't do you think I miss anything.

Thanks for help

<html>
<head>
<script type="text/javascript">
function showUser(personID){
	if(personID == ""){																	//If perosn id is not selected
		alert("ERROR: Please select an ID");
		document.getElementById("textOutput").innerHTML = "";
		return;
	}

	if(window.XMLHttpRequest){															//Code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {																			//Code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){							//Check if URL exists
			document.getElementById("textOutput").innerHTML = xmlhttp.responseText;
		}
	}

	xmlhttp.open("GET", "getuser.php?id="+personID, true);
	xmlhttp.send();
}
</script>
</head>

<body>

<form>
	<select name="users">
		<option value="">Select an ID</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select>
	&nbsp;
	<a href="javascript:showUser(users.value);">Submit</a>
	&nbsp;
	<input type="button" name="button" value="Submit" onclick="javascript:showUser(users.value);">

</form>

<br />

<div id="textOutput"><b>Person info will be listed here.</b></div>

</body>
</html>
0

OK showUser(users.value) - does this work? You don't need to pass this as a parameter. You can pick it up from inside the js script:

var personId = document.getElementById("users").value;

I don't know if the syntax above is correct - my js stretches to jQuery and v. little else I'm afraid.
Alert the personId variable to see if it is set (or place in the debug console).

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.