Cascading drop down lists

Home Forums Quform PHP Cascading drop down lists

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  waubain 6 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #29168

    waubain
    Participant

    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.

    #29173

    waubain
    Participant

    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 -->
    
    #29187

    Ally
    Support Staff

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

    #29203

    waubain
    Participant

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

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Be inspired. © 2019 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy