How redirect to URL from form based on select dropdowns?

0
votes

I have two select dropdowns which autopopulate from taxonomy categories and subcategories. I need the user to be redirected once they choose from the dropdowns and submit to the relevant URLs for that category or subcategory.

For example my first category is music then have the subcats rock pop and soul

if the user picks music in the first dropdown the second dropdown says all music > rock > pop > soul

I need it that if they pick music and all music then press the submit button they are directed to www.mydomain.com/sections/music/ and if they pick music and rock they are directed to www.mydomain.com/sections/music/rock/

this continues for each section (ie all movies > horror > action > comedy etc goes to www.mydomain.com/sections/movies and www.mydomain.com/sections/movies/horror and so on..)

I am using code from here to show the categories and sub-categories - http://wordpress.aspcode.net/view/63538464303732726638577/how-can-i-display-parent-and-child-taxonomies-in-separate-drop-downs

Thank you.

2
javascriptphpjquerywordpress

2 Answers

0
votes

Change your form action using javascript or jquery before submitting your form on submit button

or

if you are not using form then change the tag href dynamically.

action or href attribute values should be dynamically set based on selected drop down values.

0
votes

You need an ajax controller that populates the child dropdowns based on the parent one selected.

For this you'd need a select listener on the frontend and an endpoint to hit with jQuery plus likely an ajax loading gif.

Simple prototype:

Frontend File:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
        <script src="jquery.js"></script>
    </head>
    <script>
    $(document).ready(function()
    {
        function callEndpointViaAjax( call_url, payload ){
            console.log( call_url );
            console.log( payload );
            return $.ajax({
                url: call_url,
                type: "GET",
                data: payload
            });
        }
        $( '.parent_select' ).change( function() {
            sSelected = $( ".parent_select option:selected" ).text();
            console.log( sSelected );
            oRequest = callEndpointViaAjax( '/play/endpoint.php', { parent: sSelected } );
            oRequest.done(function( sJson ) {
                aData = JSON.parse( sJson );
                aData = aData.child;
                console.log( aData );
                var sel = $('<select>').appendTo('body');
                for ( var prop in aData ) {
                    if(aData.hasOwnProperty(prop)){
                        sel.append($("<option>").attr('value',aData[prop]).text(aData[prop]));
                    }
                }
            });
        });
    });
    </script>
    <body>
    <div class="parent">
        <select class="parent_select">
            <?php
                $aParent = array( 'music', 'food', 'games' );
                $iCountParent = count( $aParent );
                for( $i = 0; $i < $iCountParent; ++$i )
                {
                    echo '<option value="' . $aParent[ $i ] . '">' . $aParent[ $i ] . '</option>';
                }
            ?>
        </select>
    </div>
    </body>
    </body>
</html>

Endpoint file:

<?php
    $aGet = $_GET;
    $aPost = $_POST;

    if( !empty( $aGet[ 'parent' ] ) )
    {
        if( $aGet[ 'parent' ] == 'music' )
        {
            $aChild = array( 'rock', 'pop', 'rap' );
        }
        else if ( $aGet[ 'parent' ] == 'food' )
        {
            $aChild = array( 'steak', 'salad', 'icecream' );
        }
        else if ( $aGet[ 'parent' ] == 'games' )
        {
            $aChild = array( 'console', 'indie', 'awesome' );
        }
        $aReturn[ 'child' ] = $aChild;
        $sJson = json_encode( $aReturn, 1 );
    }

    // Send it back.
    header( 'Content-type', 'application/json' );
    echo $sJson;
?>