Submit form and show results on same page without refresh

ajax, google-visualization, jquery, mysql, php

Solution

HTML:

<form id="my_form">
    Start date: <br/> <input name="idate" id="firstdate" type="text" /><br />
    End date: <br /> <input name="fdate" id="seconddate" type="text" /><br />
    <input id="submit_form" type="submit" value="Submit">
</form>

<div id="update_div"></div>

jquery:

var submit_button = $('#submit_form');

submit_button.click(function() {

    var start_date = $('firstdate').val();
    var end_date = $('seconddate').val();

    var data = 'start_date=' + start_date + '&end_date=' + end_date;

    var update_div = $('#update_div');

    $.ajax({
        type: 'GET',
        url: 'proccess_form.php',
        data: data,   
        success:function(html){
           update_div.html(html);
        }
    });
});

proccess_form.php:

<?php
    $date1 = GET_['start_date'];
    $date2 = GET_['end_date'];

    // PERFORM THE SQL QUERY //
?>

Problem

Possible Duplicate: How to have user submit text in form and AJAX it to enter to db and show up on same page? What I want to do: index.html -> form submit to some.php -> process data (from index.html) and send data to server.php -> returning results to a index.html div. I've read ajax, jQuery, I have seen hundreds of questions on this site, but I couldn't figure it out yet. index.html: ``` <form action="some.php" method="post"> Start date: <br/> <input name="idate" id="firstdate" type="text" /><br /> End date: <br /> <input name="fdate" id="seconddate" type="text" /><br /> <br /> <input type="button" id="searchForm" onclick="SubmitForm();" value="Send" /> </form> ``` some.php: ``` <?php session_start(); $_SESSION['data1'] = $_POST['firstdate']; $_SESSION['data2'] = $_POST['seconddate']; ?> function drawChart() { var jsonData = $.ajax({ url: "server.php", dataType: "json", async: false }).responseText; var obj = jQuery.parseJSON(jsonData); var data = google.visualization.arrayToDataTable(obj); (...) ``` server.php: ``` $SQLString = "SELECT count(score) as counts, DATE(date), SUM(CASE WHEN gender = 1 then 1 ELSE 0 END) Male, SUM(CASE WHEN gender = 2 then 1 ELSE 0 END) Female, AVG(age) as age, score FROM persons WHERE date > '".$_SESSION['date1']."' AND date < '".$_SESSION['date2']."' GROUP BY DATE(date) ORDER BY DATE(date) asc"; (...) $data[0] = array('day','counts','Male','Female','Age','Score'); (...) echo json_encode($data); ```

Original source