How to properly pass a second variable to an ajax call

Question

Trying to create a year/make/model multi change select, and while I do in fact have the scripts working, what seems to be missing is the ability to pass a year variable along with a make variable to get the final model results.

Here's my present ajax functions:

        $(document).ready(function(){

            $(".year").change(function(){

                var year=$(this).val();
                var dataString = 'year='+ year;

                $.ajax({
                type: "GET",
                url: "ajax2.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $(".make").html(html);
                } 
                });

            });





            $(".make").change(function(){

                var make=$(this).val();
                var dataString = 'make='+ make;

                $.ajax({
                type: "GET",
                url: "ajax2.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $(".model").html(html);
                } 
                });

            });             

    });

My question is, how could I successfully pass the year variable as well as the make variable on the second ajax call so I can properly retrieve the model for that year and make?

score 1 · Accepted Answer · answered Mar 19 '15 at 17:53

1

You are sending incorrect data format. you can try this instead:

 $(document).ready(function(){
        var data = {};
        $(".year").change(function(){

            var year=$(this).val();
            data['year'] = year;

            $.ajax({
            type: "GET",
            url: "ajax2.php",
            data: data,
            cache: false,
            success: function(html){
                $(".make").html(html);
            } 
            });

        });





        $(".make").change(function(){

            var make=$(this).val();
            data['make'] = make;

            $.ajax({
            type: "GET",
            url: "ajax2.php",
            data: data,
            cache: false,
            success: function(html){
                $(".model").html(html);
            } 
            });

        });             

});

answered Mar 19 '15 at 17:53

hamed

7,939
15
60
114

my question is, after the first ajax call has been executed which sends the years to ajax2.php and then make is selected, does the year variable still become available to pass even tho it's been set in a previous ajax function? – MrTechie Mar 19 '15 at 17:58
Just tried it and it works. I seem to understand what's happening I believe. The data is holding all the content in an array and each time data is called in each trigger it's further adding to the array. Thanks for the help! – MrTechie Mar 19 '15 at 18:03
1

Just one correction on your understanding; If it's declared with the `{}` characters, it's an "`object`", not an array. Arrays store their elements sequentially by number, whereas objects store them by a String key. They cannot have multiple elements under a single name. The exact technical differences between objects and arrays go much further than that, but that's all you need for basics. – Katana314 Mar 19 '15 at 18:06
That I understand. I do php, not so much ajax. Thanks for your input and I appreciate the guidance. – MrTechie Mar 19 '15 at 18:10

score 0 · Answer 2 · answered Mar 19 '15 at 18:03

this answer assumes there is a value set for ".year"

$(".make").change(function(){

            var make=$(this).val();
            var year=$(".year").val();
            var dataString = 'make='+ make, 'year='+ year;

            $.ajax({
            type: "GET",
            url: "ajax2.php",
            data: dataString,
            cache: false,
            success: function(html){
                $(".model").html(html);
            } 
            });

        });

How to properly pass a second variable to an ajax call

2 Answers2