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?
1 Answer
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>
-
-
Also for more comprehensive solution you can use something like github.com/miohtama/jquery-interdependencies Commented Oct 26, 2016 at 13:12