0

I'm trying to create a form that will allow the user to add a new listing on the front side of my equipment classifieds website. I have a custom post type set up with a custom taxonomy called listing_taxonomy. The taxonomy is hierarchical and is rather deep.

I want to display 4 dropdown input fields in a form that will autocomplete using the custom taxonomy's parents or children. These fields will be make, category, class and model. Each field will need to be dependent on the previous field in the form.

For example, if a user selects the make John Deere, then the next input field will tap into all of the children of the parent term John Deere. And so on..

I have made several unsuccessful attempts at this so far. Please someone guide me in the right direction! Bonus points if you explain how I could possibly add a new term entered by the user into the correct place within my taxonomy. I will attach the relevant code below. Let me know if more info is needed. Thanks!

Functions PHP and Javascript:

link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<?php 

$cns_make = array(
    'orderby'                => 'name',
    'order'                  => 'ASC',
    'hide_empty'             => false,
    'include'                => array(),
    'exclude'                => array(),
    'exclude_tree'           => array(),
    'number'                 => '',
    'offset'                 => '',
    'fields'                 => 'names',
    'name'                   => '',
    'slug'                   => '',
    'hierarchical'           => true,
    'search'                 => '',
    'name__like'             => '',
    'description__like'      => '',
    'pad_counts'             => false,
    'get'                    => '',
    'parent'                 => '0',
    'childless'              => false,
    'cache_domain'           => 'core',
    'update_term_meta_cache' => true,
    'meta_query'             => ''
);
$makeArray = get_terms( 'listing_taxonomy', $cns_make );

$cns_cat = array(
    'orderby'                => 'name',
    'order'                  => 'ASC',
    'hide_empty'             => false,
    'include'                => array(),
    'exclude'                => array(),
    'exclude_tree'           => array(),
    'number'                 => '',
    'offset'                 => '',
    'fields'                 => 'names',
    'name'                   => '',
    'slug'                   => '',
    'hierarchical'           => true,
    'search'                 => '',
    'name__like'             => '',
    'description__like'      => '',
    'pad_counts'             => false,
    'get'                    => '',
    'parent'                 => '0',
    'childless'              => false,
    'cache_domain'           => 'core',
    'update_term_meta_cache' => true,
    'meta_query'             => ''
);
$catArray = get_terms( 'listing_taxonomy', $cns_cat );
?>
<script>
    $(function() {
    var availableTags = <?php echo json_encode($makeArray); ?>;
    $( "#cns-make" ).autocomplete({
      source: availableTags
    });
    });

    $(function() {
    var availableTags = <?php echo json_encode($catArray); ?>;
    $( "#cns-category" ).autocomplete({
      source: availableTags
    });
    });

</script>

Form Code:

                <form method="POST" action="">
                    <div class="meta-row">
                        <div class="meta-th">
                            <label for="listing-make" class="cns-row-title">Make</label> 
                        </div>
                        <div class="meta-td">
                           <input id="cns-make" name="listing_make">
                        </div>
                    </div>
                    <div class="meta-row">
                        <div class="meta-th">
                            <label for="listing-class" class="cns-row-title">Category</label> 
                        </div>
                        <div class="meta-td">
                            <input id="cns-category" >
                        </div>
                    </div>

                    <div class="meta-row">
                        <input type="button" value="Save Listing" onclick="cns_save_new_listing()">
                    </div>
                </form>

EDIT: to include David's solution.

New Script Code:

<?php 

$cns_make = array(
    'orderby'                => 'name',
    'order'                  => 'ASC',
    'hide_empty'             => false,
    'include'                => array(),
    'exclude'                => array(),
    'exclude_tree'           => array(),
    'number'                 => '',
    'offset'                 => '',
    'fields'                 => 'names',
    'name'                   => '',
    'slug'                   => '',
    'hierarchical'           => true,
    'search'                 => '',
    'name__like'             => '',
    'description__like'      => '',
    'pad_counts'             => false,
    'get'                    => '',
    'parent'                 => '0',
    'childless'              => false,
    'cache_domain'           => 'core',
    'update_term_meta_cache' => true,
    'meta_query'             => ''
);
$makeArray = get_terms( 'listing_taxonomy', $cns_make );

$cns_cat = array(
    'orderby'                => 'name',
    'order'                  => 'ASC',
    'hide_empty'             => false,
    'include'                => array(),
    'exclude'                => array(),
    'exclude_tree'           => array(),
    'number'                 => '',
    'offset'                 => '',
    'fields'                 => 'names',
    'name'                   => '',
    'slug'                   => '',
    'hierarchical'           => true,
    'search'                 => '',
    'name__like'             => '',
    'description__like'      => '',
    'pad_counts'             => false,
    'get'                    => '',
    'parent'                 => '0',
    'childless'              => false,
    'cache_domain'           => 'core',
    'update_term_meta_cache' => true,
    'meta_query'             => ''
);
$catArray = get_terms( 'listing_taxonomy', $cns_cat );
?>
<script>
    $(function() {
    var availableTags = <?php echo json_encode($makeArray); ?>;
    jQuery( "#cns-make" ).autocomplete({
        source: availableTags,
        select: function (event, ui) {
            var data = new FormData();
            var value = ui.item.value;
            data.append( 'action', 'your_function' );
            data.append( 'varname', value );
            jQuery.ajax({
                url: ajax_url,
                type: 'POST',
                data: data,
                success: function( response ) { // response is a json string returned from your_function
                    var availableCats = <?php echo json_encode($catArray); ?>;
                    jQuery( "#cns-category" ).autocomplete( 'option', 'source', availableCats );
                    }
                })
            }
        });
    });
</script>

New Form Code:

<div class="meta-row">
    <div class="meta-th">
        <label for="listing-make" class="cns-row-title">Make</label> 
    </div>
    <div class="meta-td">
       <input id="cns-make" name="listing_make" value="">

    </div>
</div>
<div class="meta-row">
    <div class="meta-th">
        <label for="listing-class" class="cns-row-title">Category</label> 
    </div>
    <div class="meta-td">
        <input id="cns-category" name="listing_category" value="">
    </div>
</div>
1

Add a autocomplete 'select' catch to your first autocomplete field. Use this to get the chosen value from the autocomplete. Use an Ajax call to obtain your next autocomplete source based on the selected value and apply the new source to the next autocomplete field.

jQuery( "#cns-make" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var data = new FormData();
        var value = ui.item.value;
        data.append( 'action', 'your_function' );
        data.append( 'varname', value );
        jQuery.ajax({
            url: ajax_url,
            type: 'POST',
            data: data,
            success: function( response ) { // response is a json string returned from your_function
                jQuery( "#cns-category" ).autocomplete( 'option', 'source', response );
            }
        })
    }
});

Reference

  • Thank you so much for responding to my question David. I'm completely new to jQuery and Ajax and I'm having a bit of trouble implementing your plan. I'm editing my original post to include this new code. Can you tell me what areas I need to change in your code? You said to add a autocomplete 'select' catch to my first field. Does that mean add onselect=""? Thank you for all of your help! – Christy Jan 10 '16 at 16:43
  • @Christy The select catch is already there: select: function (event, ui) {. I would suggest researching 'WordPress ajax' as there are many, many fantastic tutorials which can guide you through learning how to use ajax within WordPress. Also, just a heads up, the changes you made to the function will not work. You need to parse the information returned in the 'response' variable and use this to update the relevant autocomplete field. Ajax is a fantastic feature, and one that is easy to learn, and once you grasp it you will see it opens a world of possibilities! – David Clough Jan 11 '16 at 3:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.