Form querying and showing Child pages

This is one way I did it. Products is the parent page with a tree of child pages underneath. Limited to a depth of 2, I guess. After doing this way, realized that the URL doesn’t update and users would not be able to copy the URL and share it. Now looking at adding a query_var and using the pre_get_query filter instead. Also added some javascript to submit form anytime it changes so no need to press submit button. Sharing this code:

/**
 * Template Name: Products
 * Description: Used to show Products and it's child pages of product categories and subcategories.
 */

add_action( 'genesis_before_loop', 'jht_products_form' );
add_action ( 'genesis_after_loop', 'jht_products_after_loop');

function jht_products_form() {
    global $wp_query, $post;
    $productPage = get_page_by_path('products');

    $parentSelected = 0;
    $childSelected = 0;

    //TODO Maybe Add event in javascript - can use that to add page_id to query.  Could bypass these checks. OR create query_vars to use pre_get_query action

    // Check to see if submission and that nonce validates
    if( isset($_POST['product_nonce']) && wp_verify_nonce( $_POST['product_nonce'], 'product_selectd')) {
        // Sanitize inputs
        $parentSelected = isset( $_POST['parent_page_id'] ) ? intval( $_POST['parent_page_id'] ) : 0;
        $childSelected = isset( $_POST['child_page_id'] ) ? intval( $_POST['child_page_id'] ) : 0;

        // reset childSelected if current childSelected is not a child of parentSelected
        $ancestors = get_post_ancestors( $childSelected );
        if( !empty( $ancestors ) && !in_array( $parentSelected, $ancestors)) {
            $childSelected = 0;
        }
    }

    // Arguments to create the Category Select box
    $parent_args = array(
        'depth' => 1,
        'child_of' => $productPage->ID,
        'name' => 'parent_page_id',
        'selected' => $parentSelected,
        'show_option_none' => 'Choose Category'
    );

    // Arguments to create the SubCategory Select box (empty if parentSelected is 0)
    $child_args = array();
    if($parentSelected !== 0) {
        $child_args = array(
            'depth' => 1,
            'child_of' => $parentSelected,
            'name' => 'child_page_id',
            'selected' => $childSelected,
            'show_option_none' => 'Choose SubCategory'
        );
    }

    // Alter $post data depending on what form is showing
    if ($parentSelected !== 0) {
        if ($childSelected !== 0) {
            query_posts(array(
                'page_id' => $childSelected
            ));

        } else {
            query_posts(array(
                'page_id' => $parentSelected
            ));

        }
    }

    ?>
    <form id="product_select" action="<?php echo get_bloginfo('url') . '/products';?>" method="post">

        <?php
        wp_nonce_field ('product_selectd', 'product_nonce');
        wp_dropdown_pages($parent_args);
        if ($parentSelected !== 0) {
            wp_dropdown_pages($child_args);
        } else {
            ?>
            <select id="child_page_id" name="child_page_id">
                <option value="0">Choose SubCategory</option>
            </select>
            <?php
        }
        ?>
        
    </form>

    <?php
}

function jht_products_after_loop() {
    global $wp_query, $wp_the_query;


   wp_reset_query();
}

genesis();

javascript

(function( $ ){

/* javascript code goes here.  Will run after page is loaded in the DOM */
    console.log( 'my scripts started');
    $('document').ready(function() {

        //If product form is on page, add event to submit form on change
        $('#product_select').on('change', function() {
            $('#product_select').trigger('submit');
        })

    });

})(jQuery);