Member Avatar for veledrom

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
  • 115 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

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 because: n/a
Member Avatar for veledrom

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>
Member Avatar for diafol

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.