I have spent some time looking at examples of Ajax, sending a variable to PHP and getting back a different variable. This is from another page (how to get variables from php using AJAX) but it seems something is not working for me. I do not get an error, just no actions appear to happen. My goal is to simply post some data to the php page and get variables back and put them in different DIVs.
htmlpage.html
<html>
<head>
<script>
$(document).ready(function() {
$("#ajaxButton").click(function() {
$.ajax({
url:'phppage.php',
data:{username: $('#username').val()},
type:'POST',
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" name="username" id="username"/>
<input type="button" value="Find" id="ajaxButton"/>
<div id="result">This should change on click</div>
</body>
</html>
phppage.php
<?php
$_POST['username'];
$username = $_POST['username'];
$result = '<div class="result">' .$username. "</div>";
echo $result;
?>