So all i need to do is use ajax to take a name from a text box, submit it to a php script and then print the result of the php.
Here is what i have so far:
<form action="" method="POST">
Are you in the deathnote? <br/>
Name: <textarea type="text" name="checkname"></textarea>
<input type="submit" value="Submit" onclick="namecheck()">
</form>
<div id="coddisp"> Nothing yet </div>
And here is the ajax i have:
<script>
function namecheck() {
var xmlhttp;
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) {
document.getElementById("coddisp").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "check.php", true);
xmlhttp.send();
}
</script>
Now all that happens in the PHP script is that it queries an sql db with the name from the textbox called 'checkname' (using POST) and then it echoes a paragraph related to that name. I know the php script works without the AJAX through thorough testing.
So with what i have right now, it sends off the name from the textbox in the URL, however it leaves the coddisp
div blank.
Any ideas guys?
<?php
if( $_SERVER['REQUEST_METHOD'] == 'POST' &&
isset($_POST['checkname']))
{
$link = mysqli_connect('localhost', 'rhoiydsc_testusr', 'Pass123!', 'rhoiydsc_deathnote');
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}
/* create a prepared statement */
if ($stmt = mysqli_prepare($link, "SELECT cod FROM deathnote WHERE victim=?")) {
/* bind parameters for markers */
mysqli_stmt_bind_param($stmt, "s", $_POST['checkname']);
/* execute query */
mysqli_stmt_execute($stmt);
/* bind result variables */
mysqli_stmt_bind_result($stmt, $cod);
/* fetch value */
mysqli_stmt_fetch($stmt);
echo $cod;
/* close statement */
mysqli_stmt_close($stmt);
}
/* close connection */
mysqli_close($link);
}
?>
EDIT: PHP CODE ADDED
Try This, you are missing some things within your checkname()
function and your form need to stop its default action:
<?php
//example check.php
if( $_SERVER['REQUEST_METHOD'] == 'POST' &&
isset($_POST['checkname']))
{
echo htmlspecialchars($_POST['checkname']).' was sent as POST and received within PHP and now its been returned.';
die;
} ?>
<form action="" method="POST" onsubmit="return namecheck(this);">
Are you in the deathnote? <br/>
Name: <textarea type="text" name="checkname"></textarea>
<input type="submit" value="Submit">
</form>
<div id="coddisp"> Nothing yet </div>
<script>
function namecheck(form)
{
var xmlhttp;
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)
{
document.getElementById("coddisp").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","./check.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("checkname="+escape(form.checkname.value));
return false;
}
</script>
And here is how todo the same thing with jQuery
<?php
//example check.php, in this we check for bob and return as json
if( $_SERVER['REQUEST_METHOD'] == 'POST' &&
isset($_POST['checkname']))
{
if($_POST['checkname'] == 'bob'){
$resp = array('status'=>true,
'result'=>htmlspecialchars($_POST['checkname']).' found yada.');
}else{
$resp = array('status'=>false,
'result'=>htmlspecialchars($_POST['checkname']).' not found.');
}
//set json header
header('Content-Type: application/json');
//send respoce
echo json_encode($resp);
die;
} ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action="" method="POST" id="checkname_form">
Are you in the deathnote? <br/>
Name: <textarea type="text" name="checkname"></textarea>
<input type="submit" value="Submit">
</form>
<div id="coddisp"> Type bob above... </div>
<script>
$(function(){
/* Post form */
$("#checkname_form").submit(function(event){
event.preventDefault();
var request = $.ajax({
type: "POST",
url: "./check.php",
data: $(this).serialize(),
dataType: "json"
});
request.done(function(data) {
//check on data.status == true
if(data.status == true){
$("#coddisp").html(data.result);
}else{
//you could do something else here
$("#coddisp").html(data.result);
}
});
request.fail(function(jqXHR, textStatus, errorThrown) {
$("#coddisp").html('Error posting form');
});
});
});
</script>
</body>
</html>
Actually your code is correct. The problem is you haven't specified datas to send:
xmlhttp.open("GET", "check.php", true);
The XMLHttpRequest object will perform the HTTP request to check.php and that's all. If you want to send datas via GET, simply pass them as in the URL like this:
xmlhttp.open("GET", "check.php?foo=bar&number=1337", true);
If you perform the request above, the PHP script will contain these datas in $_GET:
array(
'foo' => 'bar',
'number' => '1337', // Note it's still a string, you must cast it as int
)
So if you want to send the name from the form, you write this:
xmlhttp.open("GET", "check.php?name=" + escape(name), true);
Where name is a variable that contains the value.