field dependencies
Permalink Browser Info Environment
Hey Justin -
Just starting to dig in to the new Advanced Forms/Data Display package - looking great!
Any plans for some client-side field dependency? For example, I have a drop-down list of options and would like certain form fields to show up when choosing one or another option in the dropdown.
Thanks for these fantastic add-ons.
Cheers,
Anna
Just starting to dig in to the new Advanced Forms/Data Display package - looking great!
Any plans for some client-side field dependency? For example, I have a drop-down list of options and would like certain form fields to show up when choosing one or another option in the dropdown.
Thanks for these fantastic add-ons.
Cheers,
Anna
| Type: | Discussion |
|---|---|
| Status: | New |
Oh, I guess I could add the custom javascript to a certain page type to which I add the form block..?
Hey, Anna.
Did you try your custom Javasript solution yet? Curious about the results...
Did you try your custom Javasript solution yet? Curious about the results...
Yeah, there's nothing built in to do this yet, but I'm looking at adding it. You could definitely do some sort of custom Javascript to make it work, but it could be sorta tricky.
Just finished this. For the most part, it wasn't too difficult, but I did run into a few pieces for which I have a couple of thoughts/suggestions.
Here's a rundown:
I have a form with a dropdown list. Depending on which option is selected in the dropdown, I want a) certain fields to be shown or hidden and b) some of those dependent fields need to be required.
First, I had to create a special page type (I realize this should be a single page...that'll be a next step)
Using javascript (jquery-style), I wrote a function to hide all of the dependent field container divs and zero out their inputs. I am running this function on document ready. Then, I wrote another function to show the dependent fields depending on which selection was made in the dropdown list.
I needed to get both of these functions to fire when a different selection is made in the dropdown, so I had to bind (on document ready) these two functions to the onchange event for the dropdown.
Accomplishing the custom required fields validation stumped me for a bit, as the Advanced Forms code is doing server-side validation by default. So, I had to unbind (something I've never done before) the code's onsubmit functions, run my custom client-side validation first, then re-bind the Advanced Form functions. I actually ended up validating everything client-side while I was at it.
Notes/suggestions for Justin:
1) In referencing the fields, I would have preferred to use classes so could dynamically hide a handful of divs at the same time. From within Advanced Forms, I set the class for each field that I wanted to be hidden on load. However, this seems to be a bit buggy - sometimes the field container div would take on the class, sometimes just the input field, and sometimes both. I didn't dig very far on this - just decided to go with IDs instead, but it's something you might want to look at.
2) You have a number of functions in your on submit (hide the submit button, show the "processing..." note, call Uploadify, etc). After I unbound your code from the form's onsubmit and performed my custom functions, I needed to copy all of your functions into my custom code to get them to run. But now if you change something and affects these functions, my code will break. Suggestion: throw all of these individual functions into a processing function. That way, the processing function can be called separately and won't break if you change something in the processing code.
I am very pleased! The Advanced Forms code is very clean and well-formatted. Thanks again, Justin. If anyone wants to look at my code, let me know and I'll PM you a link to the form.
Here's a rundown:
I have a form with a dropdown list. Depending on which option is selected in the dropdown, I want a) certain fields to be shown or hidden and b) some of those dependent fields need to be required.
First, I had to create a special page type (I realize this should be a single page...that'll be a next step)
Using javascript (jquery-style), I wrote a function to hide all of the dependent field container divs and zero out their inputs. I am running this function on document ready. Then, I wrote another function to show the dependent fields depending on which selection was made in the dropdown list.
I needed to get both of these functions to fire when a different selection is made in the dropdown, so I had to bind (on document ready) these two functions to the onchange event for the dropdown.
Accomplishing the custom required fields validation stumped me for a bit, as the Advanced Forms code is doing server-side validation by default. So, I had to unbind (something I've never done before) the code's onsubmit functions, run my custom client-side validation first, then re-bind the Advanced Form functions. I actually ended up validating everything client-side while I was at it.
Notes/suggestions for Justin:
1) In referencing the fields, I would have preferred to use classes so could dynamically hide a handful of divs at the same time. From within Advanced Forms, I set the class for each field that I wanted to be hidden on load. However, this seems to be a bit buggy - sometimes the field container div would take on the class, sometimes just the input field, and sometimes both. I didn't dig very far on this - just decided to go with IDs instead, but it's something you might want to look at.
2) You have a number of functions in your on submit (hide the submit button, show the "processing..." note, call Uploadify, etc). After I unbound your code from the form's onsubmit and performed my custom functions, I needed to copy all of your functions into my custom code to get them to run. But now if you change something and affects these functions, my code will break. Suggestion: throw all of these individual functions into a processing function. That way, the processing function can be called separately and won't break if you change something in the processing code.
I am very pleased! The Advanced Forms code is very clean and well-formatted. Thanks again, Justin. If anyone wants to look at my code, let me know and I'll PM you a link to the form.