Filter Select results based on selection

2 Views

I am trying to filter which job results are rendered to the page whenever the user changes the select item on my form.
The select items are dynamically populated by the code below which assigns them a value of their slug and their label. 

        <div style="background: url('<?php bloginfo( 'template_directory'); ?>/images/drop-arrow2.png') no-repeat;" id="cat-select">
            <form name="job_select" action="<?php bloginfo('url'); ?>/jobs.php" method="get">
                <select class="job_cats" name="position_name" onchange='<?php echo ".$category->category_nicename."; ?>'>
                         <?php 
                              // For every child of blog
                              $post_count = 1;
                              $categories =  get_categories('child_of=16'); 
                              foreach ($categories as $category) {
                                $option = '<option value="'.$category->category_nicename.'">';
                                $option .= $category->cat_name;
                                $option .= '</option>';
                                echo $option;
                                $post_count++;
                              }
                         ?> 
                </select>
            </form>
    </div>

The code then moves on to my main WP Loop where all of my posts are rendered to the page using this query –

Read More
    <?php 
    $node_id = 0;
    $args = array(
        'post_type' => 'jobs',
        'category_name' => $_GET['position_name']
    );

    $the_query = new WP_Query( $args );


?>

I want to the $category->cat_name (the slug) into the ‘category_name’ argument to filter the results however I am unsure of how I can a) make the page refresh to display these new filtered results (would I need AJAX to do this?) and b) How I can pass the current selected index of the select box to ‘category_name’ as a parameter, I have tried using $_GET['position_name'] but this has failed to produce any result.

To give a visual of how my page looks, a screenshot can be seen here Form Screengrab any suggestions would be greatly appreciated.

Post Views: 2

Related posts

1 comment

  1. Seeing as my comments seemed to answer the question:

    To get access to the URL params you want $wp_query->query_vars['myvar']: http://wordpress.org/support/topic/how-to-pass-value-in-wordpress-url, e.g.:

    <?php
global $wp_query; 
$node_id = 0;
$args = array(
    'post_type' => 'jobs',
    'category_name' => $wp_query->query_vars['position_name']
);

$the_query = new WP_Query( $args );

    The other parts of the question aren’t really WordPress issues, so Stack Overflow is the best place to ask them. For the updating the page you can either redirect the page onto itself using a javascript redirect for the onchange event or you can use AJAX to update the contents for the onchange event without a page refresh.

Comments are closed.