Quantcast
Channel: WordPress.org Forums » [Contact Form 7] Support
Viewing all articles
Browse latest Browse all 49500

kenshin23 on "[Plugin: Contact Form 7] CF7 Populate dropdown box based on selection of another dropdown"

$
0
0

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.


Viewing all articles
Browse latest Browse all 49500

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>