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
– Jay Blanchard, Commented Nov 21, 2012 at 21:56
No, that variables should be obtained by a form. That is my problem :S — noneJavaScript
– noneJavaScript, Commented Nov 21, 2012 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
– noneJavaScript, Commented Nov 21, 2012 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
– Botond Balázs, Commented Nov 21, 2012 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
– Jay Blanchard, Commented Nov 23, 2012 at 13:09

cssyphus · Accepted Answer · 2012-11-21 22:09:47Z

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>

answered Nov 21, 2012 at 22:09

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noneJavaScript Over a year ago

Ill try it tomorow, but it seems be what am I looking for :) thanks

noneJavaScript Over a year ago

ive made an alert(start_date), it says "undifined" when i hit the button

Brian Glaz · Accepted Answer · 2012-11-21 21:59:19Z

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, 2012 at 21:59

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

5 Comments

noneJavaScript Over a year ago

It might be that..ill try :)

noneJavaScript Over a year ago

So if my form was something like this: <input type="text" name="start_date" /><input type="text" name="start_end" /> ajax call will be server.php?start_date=2012-11-20&end_date=2012-12-20 ?

noneJavaScript Over a year ago

<form id = "myform">					 Start date: <br/> <input name="start_date" id="start_date" type="text" /><br /> End date: <br /> <input name="end_date" id="end_date" type="text" /><br /> <input id="submit_form" type="submit" value="Submit"> </form>?

cssyphus Over a year ago

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.

Brian Glaz Over a year ago

@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.

Collectives™ on Stack Overflow

Submit form and pass values with ajax

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related