Using forms to reload and update a PHP page with jQUERY/AJAX
Question
I want to post info to a PHP page from html inputs and reload it dynamically using jQUERY and AJAX. The function should take all the values from the page inputs and post them to the PHP page, then reload the page in the "graph" div. I have a html page, the script functions I am using, and the PHP page to post to. My function successfully loads the PHP page into the div when my submit button is clicked, but the information I am trying to post doesn't seem to transfer. Help is appreciated.
Here is the jQUERY script I use:
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//On-load defaults
var $critSelected = 'sex';
$(".criteria#sex").addClass("criteriaSelected");
//Action for update button
$('form#update').submit(function() {
var graphContent = $("#graphContent").attr("value");
var criteria = $critSelected;
var ageLow = $('#ageLow').attr('value');
var ageHigh = $('#ageHigh').attr('value');
var tr = $('#tr').attr('checked');
var ro = $('#ro').attr('checked');
var tilch = $('#tilch').attr('checked');
$.ajax({
type: "POST",
url: "graph.php",
data: "graphContent="+ graphContent + "criteria=" + criteria,
success: function(data){
$('div.graph').fadeOut(function(){$('div.graph').load("graph.php").fadeIn();});
}
});
return false;
});
//Change selected criteria
$(".criteria").click(function() {
switch($(this).attr("id")) {
case 'sex':
$(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
$(".criteria#loc").removeClass("criteriaSelected").addClass("criteriaDeselected");
$(".criteria#type").removeClass("criteriaSelected").addClass("criteriaDeselected");
$critSelected = 'sex';
break;
case 'loc':
$(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
$(".criteria#sex").removeClass("criteriaSelected").addClass("criteriaDeselected");
$(".criteria#type").removeClass("criteriaSelected").addClass("criteriaDeselected");
$critSelected = 'loc';
break;
case 'type':
$(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
$(".criteria#loc").removeClass("criteriaSelected").addClass("criteriaDeselected");
$(".criteria#sex").removeClass("criteriaSelected").addClass("criteriaDeselected");
$critSelected = 'type';
break;
}
});
});
</script>
I grab the posts in the php file like this:
<?php
include("graphFunctions.php");
$graphContent = htmlspecialchars(trim($_POST['graphContent']));
$criteria = htmlspecialchars(trim($_POST['criteria']));
$ageLow = htmlspecialchars(trim($_POST['ageLow']));
$ageHigh = htmlspecialchars(trim($_POST['ageHigh']));
$tr = htmlspecialchars(trim($_POST['tr']));
$ro = htmlspecialchars(trim($_POST['ro']));
$tilch = htmlspecialchars(trim($_POST['tilch']));
echo $graphContent." ".$criteria." ".$ageLow;
?>
The html file looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="graph.css" rel="stylesheet" type="text/css" />
<?php include("scripts.php"); ?>
</head>
<body>
<form id="update" method"post">
<div id="leftnav" align="center">
<div id="title" align="center">
<select id="graphContent" style="width:150px">
<option value="Age Distribution">Age Distribution</option>
<!-- <option value="sex">Sex Distribution</option>
<option value="volvloc">Volume vs. Location</option>
<option value="treatment">Treatment Distibution</option> -->
</select>
<br />
<br />
</div>
<div id="criteria" align="right">
<br />
<div class="criteria" id="sex" style="float:left"> By Sex </div>
<div class="criteria" id="loc" style="float:left"> By Location </div>
<div class="criteria" id="type" style="float:left"> In/Out Patient </div><br />
<br />
</div>
<div id="constraints" align="left">
<br />
Age Range :  
<input type="text" value="Low" style="width:30px" id="ageLow" />
to 
<input type="text" value="High" style="width:30px" id="ageHigh" />
<br />
<br />
Location :
<input type="checkbox" value="TR" id="tr" />TR
<input type="checkbox" value="RO" id="ro" />RO
<input type="checkbox" value="Tilch" id="tilch" />Tilch<br />
</div>
<div class="submit" align="left" style="padding-top:100px">
<button type="submit" name="submit">Update</button>
</form>
</div>
</div>
<div class="graph" style="display:none">
</div>
</body>
</html>
Thanks!
2 answers
solution1
3 ACCPTED 2011-05-25 18:13:31
The way you wrote your data part of AJAX call, "graphContent="+ graphContent + "criteria=" + criteria will produce a string like "graphContent=value1criteria=value2", which isn't proper.
What you can do is serialize the whole form, using jQuery serialize() method, and send that through:
var formData = $('form#update').serialize();
$.ajax({
type: "POST",
url: "graph.php",
data: formData,
success: function(data){
$('div.graph').fadeOut(function(){$('div.graph').load("graph.php").fadeIn();});
}
});
Remember that all form input elements must have a "name" attribute set in order to be serialized by.serialize();
solution2
1 2011-05-25 18:20:20
Your problem is you are using jQuery .load() to reload the graph. This causes a new instance of the PHP page to be loaded without any $_POST parameters!
You already have the page data loaded into the data variable. Use something like
$('div.graph').fadeOut(function(){$('div.graph').html(data).fadeIn();});
to get the desired result.
Also: Do what Nik E says as well...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.