I'm working on a project where I have dependent fieldsets and dropdowns, and I'm wondering if backbone.js is a good way to go about this.
The setup is like this:
-fieldset A with dropdown A1
-fieldset B with dropdowns B1 and B2
Fieldset A and dropdown A1 should always be visible. On making a selection in dropdown A1, fieldset B and dropdown B1 should appear. On making a selection in dropdown B1, dropdown B2 should appear.
Changing dropdown A1 should "reset" fieldset B and dropdown B1, and dropdown B2 should disappear.
Though this example is limited to describing two fieldsets with dropdowns, there may be more, all dependent on selections made further "up the chain."
Is backbone.js a good solution for this problem? If so, what's the best way to approach this setup?
I'd strongly recommend checking out backbone-forms, which you can use to create conditional fields (among many other things).
See my explanation in this answer: backbone-forms with conditional fields
I also created a live demo here: backbone-forms with conditional fields which is based on this discussion in the backbone forms google group.
Related
I need to create a form in which the fields are dynamically generated from the database api. The problem is that I have cases where I will have two selection fields, and one depends on the other.
For example:
Selection A - Manufacturer,
Selection B - Models
The Models that should be shown in selection B must only be the models of the manufacturer choosen in selection A.
As the form is made dynamically I don't have fixed states where I can check the value of selection A.
Does anyone have any idea how I could solve this problem?
Thanks,
Put an onChange handle on the Selection A (Manufacturer) in order to get the Selection B (Models) mounted based on the selected manufacturer.
Maybe you can fetch the models just after Selection A had a value selected.
Or, if you got all the models in the same moment when the manufacturers are fetched, when manufacturer will be selected you could filter models using it as reference.
I found the aswer and is very simple on my case, I'm using react-hook-form, so I only need use the watch function to see the valeu of
selection A, passing the name id of the component.
Imagine a page where you are asked to choose your favorite sport.
But the sports are not listed in the drop-down list, but in the form of grids div.
You can choose only one sport. And the choice should be stored in redux-form store.
What components of redux-form can I use?
Maybe there are ready-made solutions?
I guess you can achieve what you're looking for by using a group of checkboxes. Simply style the label attribute with CSS and hide the checkbox.
I am trying to create a very simple input screen containing inputs, labels and a picker.
The app that I am trying to build contain a picker, two numeric inputs and two labels (existing side by side along with the input elements) as shown below
When the user makes a selection in the picker (can choose either "Metric" or "Imperial"), the labels (B1 & B2) beside the inputs should also change accordingly as {B1: "Kg", B2: "Cm"} or {B1: "Inches", B2: "Lbs"}
What are some design pattern/strategies to achieve this ?.
Looks like a simple problem but I have run out of ideas as to how change the label based on the selection of picker.
I have thought of creating two different Modals M1 and M2 with visibility toggling but I am not sure that the solution is elegant :(
Would appreciate any tips or guidelines as to how this problem (changing a label based on picker selection) is solved.
I strongly advise you to try creating code yourself first by following the react documentation.
These are some steps to help you get started:
Set an event handler on the picker.
In this handler you set the state to be either metric or imperial.
After that you can render based on state values.
A change in state will re-render components so the label will change automatically.
I am learning angularjs and stuck at a situation where i want to bind the selected dropdown option to model/controller object. what i am trying to do is, All three dropdowns should show same option which is choosen in App1, later each dropdown can be changed depending on the usecase, want to save the clicks for user.
All three dropdown shows same option by assigning same ng-model as given for App1 dropdown, which works fine but the problem is what if the user changes any/all of the three dropdowns, i want to capture the one with option y and p choosen in an obect/array.
Any help is much appreciated.
I'm new to creating Layouts in Filemaker (I'm not using the latest version; am using Filemaker 14 Advanced instead), and I need to know: How can I conditionally/programmatically hide and show drop-down menus on the Layout, based on a selection in another drop-down menu? For instance: Let's say I have a drop-down menu called "Race," and it has three selections: "Human, Vampire, Werewolf." If I choose "Human," I want another drop-down menu called "Class" to appear; if I choose "Vampire," I want a different drop-down menu, called "Clans," to appear instead; if I choose Werewolf, then I want a drop-down menu called "Tribes" to appear. How can I engineer this using Filemaker's built-in language, or is there some other way to do it? Step-by-step instructions and/or code, please; like I said, I'm really, really new to this and to databases in general. Thanks!
You can conditionally hide layout objects by putting a calculation in the Hide Object When blank in the Behavior section of the Data tab on the Inspector palette.
That said, there are relational ways to have your dropdowns change their contents based selections in other fields. That is a lot more flexible, but (of course) more complex. What you want to set up is called a Dynamic Value list and is based on the values in a related table, filtered by the choices you made in the previous fields.
The calculation basically boiled down to just a single "equals" statement, or a bunch of them, simply singling out the value that would need to be selected in order to hide the layout objects I wanted hidden. Thanks for the help, guys! :-)
In my case, I wanted the new dropdown menus to stay shown even if many options were chosen in the first menu. I used the Pattern Count function (https://fmhelp.filemaker.com/help/10/fmp/en/html/func_ref3.33.73.html) to specify that if the answer to the last dropdown menu contained this optioned checked, the new menu would be shown by writing the following : Not PatternCount(table::variable;"text in one of the options")