Question

i have this ajax setup that performs some php calculations when a user changes the selection of a dropdown, it then sends back the results and outputs them. This all works fine except, when the user first loads the screen they are greeted, with just empty result boxes, and only when they change a selection in one of the dropdown boxes, do the results appear. My question is, is there anyway to run the ajax when the window is loaded, so the default dropdown selection can be ouputed.

Here is the ajax code, let me know if you need anything else:

  <script>
$("document").ready(function (){ 

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


        var m = document.getElementById('meter_square');
        var meter_square = m.options[m.selectedIndex].value;

        var s = document.getElementById('story_height');
        var story_height = s.options[s.selectedIndex].value;

        var r = document.getElementById('roof_type');
        var roof_type = r.options[r.selectedIndex].value;

        var q = document.getElementById('material_quality');
        var material_quality = q.options[q.selectedIndex].value;

        var w = document.getElementById('wall_type');
        var wall_type = w.options[w.selectedIndex].value;

        var f = document.getElementById('flooring');
        var flooring = f.options[f.selectedIndex].value;

     $.ajax({
            type: "GET",
            url: "add_extension_calc.php",
            data: { meter_square: meter_square, story_height: story_height, roof_type: roof_type, material_quality: material_quality, wall_type: wall_type, flooring: flooring, estimated_wealth: <?php print "$estimated_wealth";?>, gain_percent: <?php print "$addon_gain_percent";?>  },
            dataType: "json",
            statusCode: {
                200: function (response) {
                                            $("#res_expected_gain").html(response.total_gain);
                                            $("#res_expected_house_price").html(response.house_price);
                                            $("#res_total_supply_cost").html(response.store_price);
                                            $("#res_total_supply_time").html(response.store_time);
                                            $("#res_expected_profit").html(response.expected_profit);
                                         }

            }
        });
})
});
</script>

Answer 1

simply use change(), it will trigger your change ..

<script>
    $("document").ready(function (){ 

        $(".add_detail_dropdown").change(function(){
            // ............
        });

        $(".add_detail_dropdown").change();
    });
</script>