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">&nbsp;&nbsp;By Sex&nbsp;&nbsp;</div>
        <div class="criteria" id="loc" style="float:left">&nbsp;&nbsp;By Location&nbsp;&nbsp;</div>
        <div class="criteria" id="type" style="float:left">&nbsp;&nbsp;In/Out Patient&nbsp;&nbsp;</div><br />
        <br />
    </div>

    <div id="constraints" align="left">
        <br />
        Age Range : &nbsp&nbsp;
        <input type="text" value="Low" style="width:30px" id="ageLow" />
        &nbsp;to&nbsp
        <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!

just transfer the data from the form in your graph class, no reload is needed either, and it will be faster — Ibu
– Ibu, Commented May 25, 2011 at 18:08
I'll eventually use the data inside a php function that will draw a graph based on a mysql query. — meburbo
– meburbo, Commented May 25, 2011 at 18:11
don't understand why you serialize the form data into one value, i'd personaly write each POST parameter separately in the ajax query. Didn't use the method Nick E. speaks about in his answer, but that's even nicer I think, shortens JS code well. — ashein
– ashein, Commented May 25, 2011 at 18:31

Niko Efimov · Accepted Answer · 2011-05-25 18:13:31Z

3

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();

answered May 25, 2011 at 18:13

Niko Efimov

2,2233 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

meburbo Over a year ago

Ah, one more thing. In the original I wanted to pass the 'criteria variable along with the data from the form data. Any way to add this to the post?

jisaacstone · Accepted Answer · 2011-05-25 18:20:20Z

1

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

answered May 25, 2011 at 18:20

jisaacstone

4,3043 gold badges27 silver badges41 bronze badges

Collectives™ on Stack Overflow

Using forms to reload and update a PHP page with jQUERY/AJAX

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related