Home/ Questions/Q 5942885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:18:59+00:00

I want to post info to a PHP page from html inputs and reload

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0