Additional form options based on category selected not working

1 Views

I have a conditional statement to show certain images to choose from (radio buttons) based on the category chosen, however when the category is chosen, the radio buttons don’t show? What am I doing wrong? 

    <fieldset class="category"> 
                            <label for="cat">Post Category:</label> 
                            <?php wp_dropdown_categories( 'tab_index=3&taxonomy=category&hide_empty=0' ); ?> 
                </fieldset>
<?php $categoryId = $_POST['cat']; ?>
    <?php if ($categoryId == '3') { ?>
                    <fieldset class="cat1"> 
                        <label for="cat1">Please choose from 1 of the images below for your Post: </label><br>
    <input type="radio" name="hate" value="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/hate1.jpg" id="hate1" /> <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/hate1.jpg" alt="" height="167" /><br />
    <input type="radio" name="hate" value="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/hate2.jpg" id="hate2" /> 
    <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/hate2.jpg" alt="" height="167" />
                    </fieldset>

    <?php } elseif ($categoryId == '4') { ?>
                    <fieldset class="cat2"> 
                        <label for="cat2">Please choose from 1 of the images below for your Post: </label><br>
    <input type="radio" name="love" value="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/love1.jpg" id="love1" /> <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/love1.jpg" alt="" height="167" /><br />
    <input type="radio" name="love" value="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/love2.jpg" id="love2" /> <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2012/08/love2.jpg" alt="" height="167" /> 
                    </fieldset> 

    <?php } else echo 'Damnit!'; ?>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. To do what you are trying to do, you need to use add_query_arg() and get_query_var(), and then use your query arg/value to modify the query.

    I’ll give you an example of how I create similar “filters” in one custom Theme; you’ll need to modify it slightly to conform to your form-field markup rather than using merely an anchor, like I do.

    First, you need to add your query arg, like so:

    <a href="<?php echo add_query_arg( array( 'cat_filter' => 'some-cat' ) ); ?>">Some Cat</a>

    This link essentially reloads the current page, with cat_filter=some-cat appended to the URL query string.

    Second, you need to determine if your query arg has been set:

    global $wp_query;
$cat_filter = ( isset( $wp_query->query_vars['cat_filter'] ) ? $wp_query->query_vars['cat_filter'] : false );

    (Note: you’ll want to do some sanitization here, for data security.)

    If you were working with a custom query via WP_Query, you could do this check directly in the template, and then add the result to your custom query arguments array. But, if you’re working with the main loop query, you’ll want to wrap this inside a callback to filter pre_get_posts:

    function wpse63374_filter_pre_get_posts( $query ) {
    if ( ! is_main_query() ) {
        return $query;
    } else {
        if ( isset( $query->query_vars['cat_filter'] )  ) {
            // Don't forget to add sanitization!
            $query->set( 'category_name', $query->query_vars['cat_filter'] );
        }
        return $query;
    }
}
add_filter( 'pre_get_posts', 'wpse63374_filter_pre_get_posts' );

    If you want to clear the filter, you can use remove_query_arg().