title: Using forms to reload and update a PHP page with jQUERY/AJAX
body: <p>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.</p>
  
  <p>Here is the jQUERY script I use:</p>
  
  <pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  
      $(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;
              }
          });
  
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I grab the posts in the php file like this:</p>
  
  <pre><code>   &lt;?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;
  
      ?&gt;
  </code></pre>
  
  <p>The html file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;link href="graph.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;?php include("scripts.php"); ?&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="update" method"post"&gt;
  &lt;div id="leftnav" align="center"&gt;
  
      &lt;div id="title" align="center"&gt;
          &lt;select id="graphContent" style="width:150px"&gt;
              &lt;option value="Age Distribution"&gt;Age Distribution&lt;/option&gt;
              &lt;!-- &lt;option value="sex"&gt;Sex Distribution&lt;/option&gt;
              &lt;option value="volvloc"&gt;Volume vs. Location&lt;/option&gt;
              &lt;option value="treatment"&gt;Treatment Distibution&lt;/option&gt; --&gt;
          &lt;/select&gt;
          &lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div id="criteria" align="right"&gt;
          &lt;br /&gt;
          &lt;div class="criteria" id="sex" style="float:left"&gt;&amp;nbsp;&amp;nbsp;By Sex&amp;nbsp;&amp;nbsp;&lt;/div&gt;
          &lt;div class="criteria" id="loc" style="float:left"&gt;&amp;nbsp;&amp;nbsp;By Location&amp;nbsp;&amp;nbsp;&lt;/div&gt;
          &lt;div class="criteria" id="type" style="float:left"&gt;&amp;nbsp;&amp;nbsp;In/Out Patient&amp;nbsp;&amp;nbsp;&lt;/div&gt;&lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div id="constraints" align="left"&gt;
          &lt;br /&gt;
          Age Range : &amp;nbsp&amp;nbsp;
          &lt;input type="text" value="Low" style="width:30px" id="ageLow" /&gt;
          &amp;nbsp;to&amp;nbsp
          &lt;input type="text" value="High" style="width:30px" id="ageHigh" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Location : 
          &lt;input type="checkbox" value="TR" id="tr" /&gt;TR 
          &lt;input type="checkbox" value="RO" id="ro" /&gt;RO
          &lt;input type="checkbox" value="Tilch" id="tilch" /&gt;Tilch&lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div class="submit" align="left" style="padding-top:100px"&gt;
      &lt;button type="submit" name="submit"&gt;Update&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="graph" style="display:none"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks!</p>