radio button choice needs to control dropdown menu content

edfou · September 29, 2013

I have a new form that has one drop down menu which needs to be dependent on the Gender choice immediately above it. I've never done this before and am having some trouble.

Here's the form http://www.cmfsc.ca/forms/referee_evaluation.php

At the moment I have separate require_once files that contain the array data and code to create each menu; one for male and one for female. Choosing the suitable require file is done as the page loads so of course it is ineffective as it is not dependent on the radio button output.

if ($gender == 'M') {
require_once("teams_male2013.php");
} else {
require_once("teams_female2013.php");
}

The only way I can seem to get it to work is to have the user scroll down and click the Submit button to reload the page so that the radio button choice can be applied to which menu gets populated!

My question is: what options do I have to make the content of the menus dependent on a radio button choice? Can I use PHP to solve this? Do I have to apply javascript ?
Is this what is called dynamic menus?
Do I need to (or should I anyway) move the array data into my database instead of having it hardcoded in the require files?
What is the best approach?

Sorry for the basic questions!
Thanks!
Ed

Ch0cu3r · September 29, 2013

PHP doesn't respond to events happening in the browser. When the radio box is changed, you'll want to use an Ajax request (javascript) to your script to serve the correct team drop down menu dynamically.

JQuery is a javascript library and is relatively easy to use.

Edited September 29, 2013 by Ch0cu3r

Barand · September 29, 2013

If you want to do it purely with javascript

<html>
<head>
<script type="text/javascript">
    // male option values and texts
    var mvals = Array('m1','m2','m3');
    var mtxts = Array('aaa','bbb','ccc');
    // female option values and texts
    var fvals = Array('f1','f2','f3');
    var ftxts = Array('xxx','yyy','zzz');
    
    function buildOptions() 
    {
        var genderval="";
        
        // find current gender value
        for (var i=0; i<2; i++) {
            if (document.form1.gender[i].checked) {
                genderval = document.form1.gender[i].value;
            }
        }
        
        var selobj = document.getElementById("option");
        
        // clear existing options
        while (selobj.options.length) {
            selobj.options[0]=null;
        }
        
        // add gender-dependent options
        if (genderval=="m") {
            for (var j=0; j<mvals.length; j++) {
                selobj.options[j] = new Option(mtxts[j], mvals[j]);
            }
        }
        else if (genderval=="f") {
            for (var j=0; j<fvals.length; j++) {
                selobj.options[j] = new Option(ftxts[j], fvals[j]);
            }
        }    

    }
</script>
</head>
<body>
<form action="" name="form1">
    <input type="radio" name="gender" value="m" /> Male<br>
    <input type="radio" name="gender" value="f" /> Female<br>
    <br>
    <select name="option" id="option">
        <option value="">- Gender options -</option>
    </select>
    <br><br>
    <input type="submit" name="btnsubmit" value="Submit">
</form>

<script type="text/javascript">
    var i;
    for (i=0; i<document.form1.gender.length; i++) {
        document.form1.gender[i].onclick = function(){buildOptions();};
    }
</script>
</body>
</html>

edfou · September 30, 2013

Thank you very much for the help! I see that the code works as I need it to when I place it into a new testing page as is and and click on either option. Here is the page http://www.cmfsc.ca/forms/FormsTesting4.php

However I have a couple of problems; the option value is not retained (sticky) upon hitting the Submit button and secondly I'm having difficulty integrating it into my larger form (php page).
http://www.cmfsc.ca/forms/referee_evaluation.php

The first script portion I placed into the head section of the page.

The supplied form code was placed into the existing form section, except I stripped out the <form action> row and the <input type="submit" row since I already have those in my existing form.

The final script section was placed as is just before the closing body tag as it is in the example.

I made the rows with bold titles so you can find on the page and test http://www.cmfsc.ca/forms/referee_evaluation.php

Do you have any suggestions on those you difficulities?
Many thanks!
Ed

Barand · September 30, 2013

version 2 - sticky buttons

<?php
    if (isset($_GET['gender'])) {
        $currentGender = $_GET['gender'];
    }
    else $currentGender = '';
    $genders = array(
        'm' => 'Male',
        'f' => 'Female'
    );
    $genderTxt = '';
    /******************
    * sticky buttons
    *******************/
    foreach ($genders as $k=>$v) {
        $chk = $k==$currentGender ? "checked='checked'" : '';
        $genderTxt .= "<input type='radio' name='gender' value='$k' $chk/> $v<br>\n";
    }
?>
<html>
<head>
<script type="text/javascript">
    // male option values and texts
    var mvals = Array('m1','m2','m3');
    var mtxts = Array('aaa','bbb','ccc');
    // female option values and texts
    var fvals = Array('f1','f2','f3');
    var ftxts = Array('xxx','yyy','zzz');
    
    function buildOptions() 
    {
        var genderval="";
        
        // find current gender value
        for (var i=0; i<2; i++) {
            if (document.form1.gender[i].checked) {
                genderval = document.form1.gender[i].value;
            }
        }
        
        var selobj = document.getElementById("option");
        
        // clear existing options
        while (selobj.options.length) {
            selobj.options[0]=null;
        }
        
        // add gender-dependent options
        if (genderval=="m") {
            for (var j=0; j<mvals.length; j++) {
                selobj.options[j] = new Option(mtxts[j], mvals[j]);
            }
        }
        else if (genderval=="f") {
            for (var j=0; j<fvals.length; j++) {
                selobj.options[j] = new Option(ftxts[j], fvals[j]);
            }
        }    

    }
</script>
</head>
<body>
<form action="" name="form1">
    
    <h3>Gender</h3>
    <?php echo $genderTxt?>
    <br>
    <select name="option" id="option">
        <option value="">- Gender options -</option>
    </select>
    <br><br>
    <input type="submit" name="btnsubmit" value="Submit">
</form>

<script type="text/javascript">
    var i;
    for (i=0; i<document.form1.gender.length; i++) {
        document.form1.gender[i].onclick = function(){buildOptions();};
    }
    
    onload = function(){buildOptions();};
</script>
</body>
</html>

Ch0cu3r · September 30, 2013

@Barand your code remembers the selected checkbox. I think edfou also wants the chosen team option to be remembered too.

I have modified Barand's code with JQuery which remembers the chosen gender and the corresponding team option

<?php 

// if no form has been submitted then populate selectedOption array with no value
$selectedOptionArray = '';

if(isset($_POST['btnsubmit']))
{
    $gender = $_POST['gender'];
    $key    = $_POST['option'];
    // populates the javascript selectedOption array with the posted values (line 40)
    $selectedOptionArray = "'$gender', '$key'";
}

?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    // when page has loaded change gender
    $(document).ready(function() {

        // list male/female team options here
        var teamOptions = {
            // male values and texts
            m: {
                'm1' : 'aaa aaa',
                'm2' : 'bbb',
                'm3' : 'ccc'
            },
            // female values and texts
            f: {
                'f1' : 'xxx',
                'f2' : 'yyy',
                'f3' : 'zzz'
            }
        };

        /* this will be populated by PHP.
           It'll used in changeOption to select the POST'd value

           selectedOptions[0] = the selected gender checkbox
           selectedOptions[1] = the selected option value
        */
        var selectedOption = Array(<?php echo $selectedOptionArray; ?>);

        // function that populates the "option" select menu
        // selected gender is passed to this function
        function changeOption(gender) {
            // clear existing entries
            $('#option').html('');

            // for each option for chosen gender
            $.each(teamOptions[gender], function(key, value) {
                // add option 
                 $('#option')
                      .append($('<option>', { value : key })
                      .text(value)); 
            });

            // select the chosen option
            if( selectedOption.length > 0) {
                $('select[name="option"]').find('option[value="'+selectedOption[1]+'"]').attr("selected",true);
            }
        }

        // when page loads select the chosen option
        if(selectedOption.length > 0)
            changeOption(selectedOption[0]);

        // when the gender changes display new list
        $('input[name=gender]:radio').click(function() {
            changeOption(this.value);
        });
    });

</script>
</head>
<body>
<form action="" method="post">
    <b>Gender</b><br />
    <?php 
    // builds checkboxes with php
    $genders = array( 'm' => 'Male',
                      'f' => 'Female');

    foreach($genders as $value => $label):
        // check the checkbox that was checked when form was submitted
        // $checked is defined on line 6
        $checked = (isset($gender) && $gender == $value) ? ' checked="checked"' : '';

?>
    <input type="radio" name="gender" value="<?php echo $value ?>"<?php echo $checked; ?> /> <?php echo $label; ?><br>
<?php 
    endforeach 
?>
    <br>
    <b>Team</b>
    <select name="option" id="option">
        <option value="">- team options -</option>
    </select>
    <br><br>
    <input type="submit" name="btnsubmit" value="Submit">
</form>

</body>
</html>

Edited September 30, 2013 by Ch0cu3r

edfou · October 3, 2013

Hi Ch0cu3r
I ran out of time and went with a simpler choice for my menu in the mean time. However I DO want to use the method you have kindly helped on. When I get time, I will try again to integrate your supplied code into my php page so that it will work.
Thanks so much for all the help! Much appreciated to you and Barand.
Cheers
Ed

Sign In

radio button choice needs to control dropdown menu content

Recommended Posts

edfou

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

edfou

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

edfou

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information