How to run this form .change() on load?

I have created a script that dynamically updates the query based on filters (what user has chosen in the form) and loads the external php file with updated data, but I want to make the change function load when page is loaded.

The query is updated successfully when user changes any input and the external results are loaded. I want however to load the results when page is loaded and not wait for user input.

I have managed to make the form updates what the user has selected by storing cookies, still not sure how to make it load when he visits the page. I tried to add .trigger('change') at the end of $(".QueryElement").change(function() but I get inconsistent results, it does not work.

This is my code:

<script type="text/javascript">
$(function() {

    /*
    * Retrieve cookies in form
    */
    $("#showposts").val($.cookie('deluxe-' + 'numposts'));

    $(".tags, .categories, #show-all-tags, #show-all-cats").each(function() {
        if ($.cookie('deluxe-' + $(this).attr('id')) == 'checked') {
            $(this).attr('checked', true);
        }
        if ($.cookie('deluxe-' + $(this).attr('id')) == 'unchecked') {
            $(this).attr('checked', false);
        }
    });

    /*
    * This function is to add filters
    */
    $(".QueryElement").change(function() {

        var query = '';
        $.cookie('deluxe-form-state', 'activated', { path: '/', expires: 100 });

        query += "showposts=" + $("#showposts").val();
        $.cookie('deluxe-' + 'numposts', $("#showposts").val(), { path: '/', expires: 100 });

        fu开发者_如何学运维nction add_filters(showall, maincls, type) {
            if ($(showall).is(":checked") == false) {
            $.cookie('deluxe-' + $(showall).attr('id'), 'unchecked', { path: '/', expires: 100 });
            var val = [];
            $(maincls + ':checked').each(function(i){
            val[i] = $(this).attr('id');
            $.cookie('deluxe-' + $(this).attr('id'), 'checked', { path: '/', expires: 100 });
            });
            $(maincls + ':not(:checked)').each(function(i){
            $.cookie('deluxe-' + $(this).attr('id'), 'unchecked', { path: '/', expires: 100 });
            });
            query += "&" + type + "=" + val;
            } else {
            $.cookie('deluxe-' + $(showall).attr('id'), 'checked', { path: '/', expires: 100 });
            $(maincls + ':checked').each(function(i){
            $.cookie('deluxe-' + $(this).attr('id'), 'checked', { path: '/', expires: 100 });
            });
            $(maincls + ':not(:checked)').each(function(i){
            $.cookie('deluxe-' + $(this).attr('id'), 'unchecked', { path: '/', expires: 100 });
            });
            query += "&" + type + "=";
            }
        }

        add_filters('.show-all-cats', '.categories', 'cat');
        add_filters('.show-all-tags', '.tags', 'tag');

        $("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + query);

    });

});
</script>

And this is my queryform if you need it.

<?php

########################################
# showposts=
########################################

echo '<select id="showposts" class="QueryElement">';
    for ($i = 5; $i <= 50; $i += 5) {
        echo '<option value="'.$i.'">'.$i.'</option>';
    }
echo '</select>';

########################################
# cat=
########################################

$categories = get_categories();
foreach($categories as $cat) {
    echo '<input type="checkbox" name="'.$cat->cat_ID.'" id="'.$cat->cat_ID.'" class="categories QueryElement" /> '.$cat->cat_name;
}
    echo '<input type="checkbox" name="show-all-cats" id="show-all-cats" class="QueryElement show-all-cats" checked="checked"> Include all categories';

########################################
# tag=
########################################

$tags = get_tags();
foreach($tags as $tag) {
    echo '<input type="checkbox" name="'.$tag->slug.'" id="'.$tag->slug.'" class="tags QueryElement" /> '.$tag->name;
}
    echo '<input type="checkbox" name="show-all-tags" id="show-all-tags" class="QueryElement show-all-tags" checked="checked"> Include all tags';

?>

Edit: trigger at the end of function works but for first time load only, i get incosistent changes when the user updates the form when the page is loaded. The form is supposed to act as content filter, and the external file is supposted to act as content results filtered by the form.

---

Abstracting the change function should do the trick.

getData();
$('el').change(getData);

function getData(){ 
  //.change function here 
}

or

An event trigger should work.

$('el').trigger('change');

jquery docs on .trigger()

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.