Cascading drop down lists

[waubain]

I am trying to create cascading drop down lists in a Quform. I have spend several days trying to understand how the basic process works. I am not sure if this is possible in Quform PHP, but it would be a nice feature.

Here is my form code fragment for the 2 select lists.

<label for="meetingdate">Meeting Date<span class="quform-required">*</span></label>
<div class="quform-input">
    <select class="quform-tooltip" id="meetingdate" name="meetingdate" title="Meeting Date" onchange="getSpeaker()">
        <option value="">Choose a date</option>
        <?php
        $meetinfo_array = array(
        array("meetdate"=>"2019-05-02","speaker"=>"Bob"),
        array("meetdate"=>"2019-05-02","speaker"=>"Jill"),
        array("meetdate"=>"2019-06-18","speaker"=>"Sam"),
        array("meetdate"=>"2019-06-18","speaker"=>"Mary")
        );
    
            $meetingdates = array();
            foreach($info_decoded as $row) {
                if (($row['meetdate']) >= $todaysdate && ($row['showrow'] == true)) {
                $meetingdates[] = $row['meetdate'];
                }
            }   
            $uniquedates = array_unique($meetingdates);

        foreach($uniquedates as $item){
        ?>
        <option value="<?php echo $item;?>"><?php echo date("F d, Y", strtotime($item)); ?></option> 
        <?php
        }
        ?>        
    </select>
  
<script>
    function getSpeaker() {
        var x = document.getElementById('meetingdate'); 
        var id = x.value;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","getSpeakers.php?id="+id,true);
        xmlhttp.send();
    }      
</script>
                        
    <select class="quform-tooltip" id="speaker" name="speaker" title="Speaker">
        <option value="">Choose a speaker</option>
       //insert return from speakers array from getSpeakers.php     
    </select>

Without a clear understanding here is getSpeakers.php file

<?php

if ( isset( $_GET['id'] ) && !empty( $_GET['id'] )){ 
    $mdate = $_GET['id']; 
} 

$handout_array = array(
    array("meetdate"=>"2019-05-02","speaker"=>"Bob"),
    array("meetdate"=>"2019-05-02","speaker"=>"Jill"),
    array("meetdate"=>"2019-06-18","speaker"=>"Sam"),
    array("meetdate"=>"2019-06-18","speaker"=>"Mary")
    );
    
    $speakers = array();
    foreach($handout_array as $row) {
        if (($row['meetdate']) == $mdate) {
        $speakers[] = $row['speaker'];
        }
    }
 
echo $speakers;  //return $speakers array to QuForm
?>

Any support to solve this would be appreciated.

[waubain]

I figured out a solution. I built a plain select input in the php file which was then returned to the QuForm element.
Since I am a beginner, improvements are welcome.
Thanks.

php file

//array not shown
         if ( isset( $_GET['id'] ) && !empty( $_GET['id'] )){ 
         $mdate = $_GET['id']; 
        }         
    
    echo '<select>';
    echo '<option value="">Choose a speaker</option>';                         
        $speakers = array();
        foreach($info_decoded as $row) {
         if (($row['meetdate']) == $mdate) {
         $speakers[] = $row['speaker'];
         }
        }
        foreach($speakers as $item){                                                       
        echo '<option value="' . $item . '">' . $item . '</option>';
        };
      echo '</select>';

form php

<!-- Begin Speaker Select element -->
                                    <div class="quform-element quform-element-select quform-huge">
                                        <div class="quform-spacer">
                                            <label for="speaker">Speaker<span class="quform-required">*</span></label>
                                            <div class="quform-input">
                                                <select class="quform-tooltip" id="speaker" name="speaker" title="Speaker">
                                                    <option value="">Choose meeting date first!</option>
                                                </select>
                                            </div>
                                        </div>
                                     </div>
                        <!-- End Speaker Select element -->

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[waubain]

I got this to work to my satisfaction. Thank you.

I will also look at the example code you provided, as a possible alternative.

[Author]

Posts