Making form with deform and whould like to change the pageShema class depending on the choices made by the user. Ex. if he selects option 1 from selectwidget, show him one set of fields, if case of other choice - another. How to do this?
Asked
Active
Viewed 487 times
1 Answers
5
You can use jquery and select with the "name" attribute. Also, you can use the jquery "parent()" function to get the container of the input you are interested in showing/hiding.
For instance, in your schema do something like:
# This is the "<select>"
choices = (('yes','Yes'),
('no', 'No'))
bar = colander.SchemaNode(colander.String(),
widget=deform.widget.SelectWidget(values=choices))
# This is the input that should appear only when the "yes" value is selected
foo = colander.SchemaNode(colander.String())
Then, in your template, add somethig like:
<script>
$( document ).ready(function() {
// ensure that the "foo" input starts hidden
var target = $("input[name=foo]").parent().parent();
target.hide();
$("select[name=bar]").on('change', function(){
var valueSelected = this.value;
if (valueSelected == "yes") {
target.show();
} else {
target.hide();
}
});
});
</script>

Matteo Gamboz
- 373
- 3
- 11
-
-
Also for more comprehensive solution you can use something like https://github.com/miohtama/jquery-interdependencies – Mikko Ohtamaa Oct 26 '16 at 13:12