Online Form Custom Table Dropdowns

stan zhen asked on November 11, 2017 22:08

EDIT:

I have figured out what was going on with my problem. I set dependant and depending fields for the dropdowns so it does a page refresh which wipes away the previous changes done so in my case instead of doing the hide/show in a .change function just move that code into document.ready when the page is finished loading.

Another problem persists is that the values being saved into my database tables are the ID value of the dropdown list instead of the text? Is there any way to have it store as text instead?

Hi,

I've been playing around with dropdown form controls recently with custom macro methods, custom macro mdoules, and custom table.

I've come to the conclusion to use a custom table instead to avoid all the code behind and make it easier to make changes strictly from kentico side. I have a cascading dropdown, the 2nd dropdown gets populated by a SQL datasource something like SELECT Value, Name FROM custom_table. I then filter it with javascript in the layout section of the form.

My Problem:

I can't seem to get the javascript working to hide the dropdown list options based on the my 1st dropdown list selection. I've noticed the dropdown lists are wrapped inside a div so I grab the div first and then it's select element inside the div.

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $divDdlOne = $("[id$='_ncpddlone'] select"); // will get the select element of the dropdown
        $divDdlTwo = $("[id$='_ncpddltwo'] select");

        $($divDdlone).change(function() {
            var selectedOption = $(this).val();
            if(selectedOption.indexOf("value 1 from ddl one") != -1) {
                console.log("Got value 1 from ddl one");
                $($divDdlTwo).find("option[value='3']").hide();
            }
        });
    });
</script>

So based on the javascript, I have console.log in there to test if it actually goes into the if statement and it does. I even console.logged $(DivddlTwo).find("option[value='3']")val() before and it gives me back the correct value so I would assume that it's actually accessing the proper value in my dropdown list. The issue is it never hides that value, so I can't filter my ddl two properly based on the selected value of the first dropdown.

Any help would be appreciated thanks!

Recent Answers

Juraj Ondrus answered on November 13, 2017 12:57

Hi,
What are the values added to the drop down? The format is value;displayName - so it looks like the first part of the pair is the ID - so this one gets stored in the DB. If you want to store the text value, then the pair should look like: textValue;DisplayName so, for example instead of:
1;blue 2;red
you will use
blue;blue red;red

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on November 13, 2017 20:29

Hi Juraj,

Yes I'm aware of how the format is stored unfortunately what I want to do is something like hiding/showing the dropdown based on its values. Say I have 8 options of values 1-8, so something like 1;john doe, 2;jane doe, 3;test doe, and so forth.... I'd like to do something in javascript like ddl.find("option[value='2']").hide() or .show() that value based on some conditions.

Now I can also hardcode the value with text so if I do it like textValue;text it would be something like ddl.find("option[value='jane doe']").hide(); just this way is a lot harder to maintain in the future if say my text changes then I would need to change all my values as well compared to having it hide based on ID since my ID's never change just the text.

0 votesVote for this answer Mark as a Correct answer

Juraj Ondrus answered on November 14, 2017 07:48

Hi,
In this case, you can use the depending field setting. Your visibility condition will be bit more complex to reflect your rules for the condition, but you can follow this article to learn how to work with the depending fields.

0 votesVote for this answer Mark as a Correct answer