dropdown with no submit

Question

So I have a dropdown menu that has a list of all pages using a certain template, when the user selects a dropdown item id like them to be re-directed to that page.

Here is what I have so far...

            <div class="col-md-6 col-md-offset-3">
                <?php
                //create a var using get_pages create an array and get all page names
                $pages =  get_pages(array(
                    'meta_key' => '_wp_page_template',
                    'meta_value' => 'template-services.php'
                ));
                ?>
                <p>Looking for something else?</p>
                <select id="cat" class="form-control">
                    <?php
                    // for each item in pages array assign to the new var page
                        foreach( $pages as $page ) {
                        //echo out var page for each item in the array
                            echo '<option>' . $page->post_title . '</option>';
                        }?>
                </select>
            </div>

Could someone show me how I can achieve this? I know there is a script on the Wordpress codex that allows you to do this for categories but I have no idea how to modify it to work for my needs

Answer 1

You can use "get_page_link" function to Retrieves the permalink for the current page (if in The Loop) or any arbitrary page ID if passed as the first argument.

something like this:

<a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>

Reference: https://codex.wordpress.org/Function_Reference/get_page_link

Answer 2

No problem, try using option "onChange" event:

something like this:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>

Simply add the page permalinke to option value.

Answer 3

First wrap your input field in form using form elements directly is not good idea. Then make your form to submit normally and bind with javascript as well. So it can work in both way whether js is disabled or enabled.

Consider this example:-

<div class="col-md-6 col-md-offset-3"><?php
    //create a var using get_pages create an array and get all page names
    $pages =  get_pages(array(
        'meta_key' => '_wp_page_template',
        'meta_value' => 'template-services.php'
    ));

    if (!empty($pages)) { ?>
        <p><?php _e('Looking for something else?', 'your-text-doamin'); ?></p>
        <form method="GET" action="<?php echo home_url(); ?>">
            <select id="cat" class="form-control" name="p"><?php
                // for each item in pages array assign to the new var page
                echo '<option data-url="" value="">' . __('Select', 'your-text-domain') . '</option>';
                foreach( $pages as $page ) {
                    //echo out var page for each item in the array
                    echo '<option data-url="' . get_permalink($page->ID) .'" value="' . $page->ID . '">' . get_the_title($page->ID) . '</option>';
                } ?>
            </select>
            <noscript><input type="submit" value="<?php _e('Submit', 'your-text-domain'); ?>" /></noscript>
        </form><?php
    } ?>
</div>

Here I am using data-url for redirecting by javascript and value with page id so we can submit the form normally. Wrapping submit button in <noscript> tag so it will not appear when JS is enabled.

Then put this javascript in your custom js file.

jQuery(document).ready(function (){
    jQuery('#cat').change(function (){
       if (jQuery(this).children('option:selected').data('url')) {
           window.location = jQuery(this).children('option:selected').data('url');
       } 
    });
});