提交表单并使用ajax传递值

Question

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 :)

Answer 1

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>