WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
CF7 Populate dropdown box based on selection of another dropdown (8 posts)

  1. kenshin23
    Member
    Posted 1 year ago #

    Hello everyone, I've been searching for a solution but so far it has eluded me. Note that I've also been avoiding a solution in which I'd have to hack core code of CF7 but will do so if needed.

    I need to have a series of select boxes that will be populated according to the choices a user makes in each of the selects. For example, the "Country, State, Cities" select boxes. I've seen lots of examples for this based on jquery and such, but would like some help on how to implement this using CF7 or at least pointing me in the right direction.
    Thanks in advance.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. kenshin23
    Member
    Posted 1 year ago #

    Any ideas, please?

  3. IgnacioJ
    Member
    Posted 1 year ago #

    Same question here. I´ve looked eveywhere and couldn´t find anything about this.

    Like kenshin23, based on a selection in a dropdown menu, I need the next dropdown to show the options according to that. And so on.

    At last, when the person submits, it should point to an email according to all those selections.

  4. biswajeet
    Member
    Posted 1 year ago #

    The features you are looking is called field dependency and currently CF doesn't have any such thing built-in out of box.

  5. rospo85
    Member
    Posted 1 year ago #

    I create a custom plugin with ajax call that intercept the id of the field and add this functionallity.
    it's not hard to do and help with this feature!

  6. IgnacioJ
    Member
    Posted 1 year ago #

    So you are going to develop such a plugin rospo85?

    Great then, can´t wait to see it.

  7. kenshin23
    Member
    Posted 1 year ago #

    For the record, I ended up doing this with plain ol' jQuery in the mean time, like this:

    In CF7:

    [select* vehicle-type id:cf7form-vehicle-type class:select-vehicle-type include_blank "Cars" "Trucks" "Bikes" "Buses" "Heavy Machinery"]
    [select* vehicle-make id:cf7form-vehicle-make class:select-vehicle-make include_blank]
    [select* vehicle-model id:cf7form-vehicle-model class:select-vehicle-model include_blank]

    In js file included from template:

    //Clean every select's options:
    //Optional: fill first option with blank value.
    function clearSelect(selector_str, fillBlank) {
    	fillBlank = (typeof fillBlank === "undefined") ? true : fillBlank;
    
    	jQuery(selector_str).empty();
    	if(fillBlank) {
    		jQuery(selector_str).append('<option value="">---</option>');
    	}
    }
    
    //Functions for the form's selects:
    jQuery(document).ready(function(){
    
        if (jQuery('#cf7form-vehicle-type').length > 0) {
            jQuery('#cf7form-vehicle-type').change(function(){
                jQuery('#cf7form-vehicle-make').attr('disabled','disabled');
                jQuery('#cf7form-vehicle-model').attr('disabled','disabled');
                clearSelect('#cf7form-vehicle-make');
                clearSelect('#cf7form-vehicle-model');
                var vehicle_type = jQuery('#cf7form-vehicle-type').val();
    
                jQuery.get(
                    'select-ajax.php',
                    {level: 'make', type_selected: vehicle_type},
                    'json'
                ).done(function( data ){
                    var optArray = JSON.parse(data);
                    var select = jQuery('#cf7form-vehicle-make');
                    var i;
                    if(select.prop) {
                        var options = select.prop('options');
                    }
                    else {
                        var options = select.attr('options');
                    }
    
                    for (i = 0; i < optArray.length; ++i) {
                        options[options.length] = new Option(optArray[i], optArray[i]);
                    }
                });
                jQuery('#cf7form-vehicle-make').removeAttr('disabled');
                jQuery('#cf7form-vehicle-model').removeAttr('disabled');
            });
        }
    
        if (jQuery('#cf7form-vehicle-make').length > 0) {
            jQuery('#cf7form-vehicle-make').change(function(){
                jQuery('#cf7form-vehicle-model').attr('disabled','disabled');
                clearSelect('#cf7form-vehicle-model');
                var vehicle_type = jQuery('#cf7form-vehicle-type').val();
                var vehicle_make = jQuery('#cf7form-vehicle-make').val();
    
                jQuery.get(
                    'select-ajax.php',
                    {level: 'model', type_selected: vehicle_type, make_selected: vehicle_make},
                    'json'
                ).done(function( data ){
                    var optArray = JSON.parse(data);
                    var select = jQuery('#cf7form-vehicle-model');
                    var i;
                    if(select.prop) {
                        var options = select.prop('options');
                    }
                    else {
                        var options = select.attr('options');
                    }
    
                    for (i = 0; i < optArray.length; ++i) {
                        options[options.length] = new Option(optArray[i], optArray[i]);
                    }
                });
    
                jQuery('#cf7form-vehicle-model').removeAttr('disabled');
            });
        }
    
        //Fill year select with series of years starting with current year + 1 to 1950
        if (jQuery('#cf7form-vehicle-year').length > 0) {
            var year_select = jQuery('#cf7form-vehicle-year'), year = new Date().getFullYear() + 1;
            if(year_select.prop) {
                var options = year_select.prop('options');
            }
            else {
                var options = year_select.attr('options');
            }
            do {
                options[options.length] = new Option(year, year);
                year--;
            } while(year >= 1950);
        }
    })

    Ajax-select.php (simplified):

    <?php
    //Data array included here:
    require_once("vehicle-data.php");
    
    //AJAX-provided values:
    $level = (isset($_GET['level']) ? $_GET['level'] : "");
    $type_selected  = (isset($_GET['type_selected'])  ? $_GET['type_selected']  : "");
    $make_selected  = (isset($_GET['make_selected'])  ? $_GET['make_selected']  : "");
    
    if( $level == "" ):
        echo json_encode(array("Error" => "Array level to return was not set."));
        return false;
    endif;
    
    if( $level == "make"):
        if( $type_selected == "" ):
            echo json_encode(array("Error" => "A necessary select option was not obtained."));
            return false;
        endif;
    elseif ( $level == "model"):
        if( $type_selected == "" or $make_selected == "" ):
            echo json_encode(array("Error" => "A necessary select option was not obtained."));
            return false;
        endif;
    else:
        echo json_encode(array("Error" => "Incorrect level set."));
        return false;
    endif;
    
    //Source array filtered to return requested data:
    switch($level):
        case "make":
            $sublevel_array = $options[$type_selected];
            $return_data    = array_keys($sublevel_array);
            break;
        case "model":
            $sublevel_array = $options[$type_selected][$make_selected];
            $return_data    = array_values($sublevel_array);
            break;
        default:
            echo json_encode(array("Error" => "Array sublevel to return not set."));
            return false;
    endswitch;
    
    echo json_encode($return_data);
    ?>

    I hope this helps someone. I know the code might not be the most efficient one, but it's working ok so far.

  8. IgnacioJ
    Member
    Posted 1 year ago #

    Hi kenshin23.

    I have looked at your code and I have some questions:

    1. You put 3 selects: if I choose "Cars", what happens with the other selects?

    2. Where do I paste the code "In js file included from template"?

    3. Where do you put Ajax-select.php?

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic