Forums

Hi all,
​
I've found a couple of posts dealing with the method to have one dropdown change its values depending on another but the posts seem to miss out on key steps and I'm pretty much stuck.
​
I can see that I could have one field with a preset list of entries as text and value pairs.
​
It is the second field, whose entries will change that I am struggling with.
​
I cannot seem to make sense of how to add PHP to determine the alternative options and how I call that PHP properly.
​
I think that in the dynamic data part in the second field I should add {var:php_7} for instance.
​
Does that mean that I just need to write code that looks at the other field and if the field has one value, returns one set of values and if it contains another then a different set of values?
​
Obviously, I need to add the PHP in the Actions section and I see where to enter that but then I get stuck.
​
If that is right, how do I reference the first field in PHP to perform an if...then...else operation to return values for the second field.
​
I feel like I've missed an important bit of understanding and would really appreciate some guidance.
​
many thanks,
​
Rob.

Hi Rob,
​
If you want the change to happen 'live' in the browser then you can't easily use PHP; any dynamic scripting has to use JavaScript. Previous versions had an option to have the first dropdown call a JavaScript function 'on change' but I don't see this in CFv7 so you would have to create the script to run when the dropdown changes.
​
It is possible to have this function call back to the server using AJAX if you need, for example, to make a database query to get the info for the second dropdown.
​
Bob

That makes sense.
​
Ok, so where am I storing the JS?
​
Within the form somewhere or in functions.php?
​
I notice that the example form which uses the database to provide values does not appear to use JS unless that is hidden or built into that feature where you reference database values.
​
If that's the way to do it. I can create a table with my details in and use that if that is the preferred and recommended option.
​
Could you confirm and do I have to make the table in any special way or use a naming convention for it?
​
Cheers,
​
Rob.

Hi Rob,
​
You can add JavaScript to your form page by clicking Custom in the Page View menu and then dragging a JavaScript element into the page.
​
I just had a look at the Categories + Articles example but can't see exactly how that works - sorry :-(
​
Bob

Suppose, you have a select element and you need to select one of its options based on one of its values Example.

$( "#workField" ).change(function() {
    if ($(this).val() == "HI-TEC"){
        $("#occupetion").val("QA");
    }
    if ($(this).val() == "Food Industry"){
        $("#occupetion").val("Food Industry");
    }
    if ($(this).val() == "Marketing"){
        $("#occupetion").val("Marketing");
    }
});

​
it seems you have some problem that how to use this code, so i include a full html page code hope to be helpful.
​

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1">
        <div>
            <select id="workField">
                <option value="HI-TEC">HI-TEC</option>
                <option value="Food Industry">Food Industry</option>
                <option value="Marketing">Marketing</option>
            </select>
            <select id="occupetion">
                <option value="QA">QA</option>
                <option value="Food Industry">Food inspectur</option>
                <option value="Marketing">Selles man</option>
            </select>
        </div>
        <script>
            $("#workField").change(function () {
                if ($(this).val() == "HI-TEC") {
                    $("#occupetion").val("QA");
                }
                if ($(this).val() == "Food Industry") {
                    $("#occupetion").val("Food Industry");
                }
                if ($(this).val() == "Marketing") {
                    $("#occupetion").val("Marketing");
                }
            });
        </script>
    </form>
</body>
</html>