Index.html
function drawChart() {
var jsonData = $.ajax({
url: "server.php?startdate=" + start_date + "&enddate=" + end_date + "&type=" type,
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(obj);
(...)
This vars: start_date, end_date and type should be obtained by a form without refreshing the page, so I can send it to server.php and do some stuff
How can I do that without change this jsonData structure etc ?
Because I need it to build charts.
Thanks one more time :) ps: Notice me if I wasnt clear :)
Imagining a form (such as the one below) on your page, some jQuery would allow you to grab the values entered into the text fields and store into javascript variables that you can then use in your drawChart() function.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#never_name_a_button_submit').click(function() {
var start_date = $('start_date').val();
var end_date = $('end_date').val();
var type = $('type').val();
});
});
function drawChart() {
var jsonData = $.ajax({
url: "server.php?startdate=" + start_date "&enddate=" + end_date + "&type=" type,
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(obj);
(...)
</script>
<form id="myForm">
<input type="text" name="start_date" id="start_date"><br />
<input type="text" name="end_date" id="end_date"><br />
<input type="text" name="type" id="type"><br />
<input type="button" id="never_name_a_button_submit">
</form>
Assuming your form has an id
and each of your form inputs have a name
you can use the jQuery serialize()
function which will send the form data to the URL in your ajax request. Something like this:
var jsonData = $.ajax({
url: "server.php",
data: $('#myForm').serialize(),
dataType: "json",
async: false
}).responseText;
Notice the addition of the data
option in the ajax call, where #myForm
is the id of your form.
So for example if you had
<input type="text" name="start_date" />
in your form, the ajax request would actually be sent to server.php?start_date=2012-11-20