Submit form and pass values with 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 :)

You didn't pass start_date and end_date to the drawChart() function. Are they global variables? — Jay Blanchard, Nov 21 '12 at 21:56
No, that variables should be obtained by a form. That is my problem :S — noneJavaScript, Nov 21 '12 at 21:57
**Index.html** should have a form that receive start_date, end_date, type, and send it to **server.php**, in turn will return some data (charts) to **index.html** again. — noneJavaScript, Nov 21 '12 at 22:00
What is your problem exactly? Do you get any error messages? Also, I noticed that you forgot a `+` here: `start_date + "&enddate="`. — Botond Balázs, Nov 21 '12 at 22:01
You're missing a + here "&type=" type should be "&type=" + type. Are you getting any errors at all? Have you looked at the request / response in your developer tools? — Jay Blanchard, Nov 23 '12 at 13:09

score 1 · Answer 1 · answered Nov 21 '12 at 21:59

1

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

answered Nov 21 '12 at 21:59

Brian Glaz

15,468
4
37
55

It might be that..ill try :) – noneJavaScript Nov 21 '12 at 22:04
So if my form was something like this: `` ajax call will be `server.php?start_date=2012-11-20&end_date=2012-12-20` ? – noneJavaScript Nov 21 '12 at 22:06
`
Start date:

End date:

?` – noneJavaScript Nov 21 '12 at 22:10
For greatest readability, modify your original question with the above HTML form code. Also, be careful with capitalization: "myform" in your comment above, but "myForm" in Brian's solution. – cssyphus Nov 21 '12 at 22:14
@skdnewbie Yes that's how it will work, except if you keep the `submit` button it will actually submit your form the normal way, which is not what you want. – Brian Glaz Nov 21 '12 at 23:06

score 1 · Accepted Answer · answered Nov 21 '12 at 22:09

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>

Ill try it tomorow, but it seems be what am I looking for :) thanks — noneJavaScript, Nov 21 '12 at 22:58
ive made an alert(start_date), it says "undifined" when i hit the button — noneJavaScript, Nov 21 '12 at 23:57

Submit form and pass values with ajax

2 Answers2

Linked