:D Just to feedback to this forum with some useful information here is the working code that allows hide-unhide containers easily, first of all what do we need?
[attachment=0]Captura1.JPG[/attachment]
a checkbox that :
when checked must hide button "1" and show container box with some fields
when uncheck must show button "1" and hide container box with some fields
[attachment=1]Captura2.JPG[/attachment]
this is easy implemented with events in chronoforms v5, the issue comes when you want hide state for container on loading form
[attachment=2]Captura3.JPG[/attachment]
I couldn't find information about this, and not very expert on JavaScript programming but finally I found a simple JS code
this must be in load JS action before HTML (render Form)
also is necesary change basic events by our functions
[attachment=3]Captura4.JPG[/attachment]
[attachment=0]Captura1.JPG[/attachment]
a checkbox that :
when checked must hide button "1" and show container box with some fields
when uncheck must show button "1" and hide container box with some fields
[attachment=1]Captura2.JPG[/attachment]
this is easy implemented with events in chronoforms v5, the issue comes when you want hide state for container on loading form
[attachment=2]Captura3.JPG[/attachment]
I couldn't find information about this, and not very expert on JavaScript programming but finally I found a simple JS code
function showcontainer(boxid){
document.getElementById(boxid).style.visibility="visible";
}
function hidecontainer(boxid){
document.getElementById(boxid).style.visibility="hidden";
}
window.addEvent('load',function(){
hidecontainer('box2');
});this must be in load JS action before HTML (render Form)
also is necesary change basic events by our functions
[attachment=3]Captura4.JPG[/attachment]
Thanks very much, this helped me a lot as there isn't much documentation for some of the ChronoForms v5 features yet.
Using display:block; and display:none; woked better for me than visibility:visible; and visibility:hidden; like this:
Using display:block; and display:none; woked better for me than visibility:visible; and visibility:hidden; like this:
function showcontainer(boxid){
document.getElementById(boxid).style.display="block";
}
function hidecontainer(boxid){
document.getElementById(boxid).style.display="none";
}
window.addEvent('load',function(){
hidecontainer('box2');
});
Hi,
The main difference between using 'display' and 'visiibility' is that 'visibility:hidden' leaves an empty space in the page whereas 'display:none' closes up the space.
I'm not clear how CFv5 handles validation here but in CFv4 I made it a practice to set any hidden element to 'disabled' to block validation and also to remove any values or selections in case they showed up if the input was later re-displayed.
Bob
The main difference between using 'display' and 'visiibility' is that 'visibility:hidden' leaves an empty space in the page whereas 'display:none' closes up the space.
I'm not clear how CFv5 handles validation here but in CFv4 I made it a practice to set any hidden element to 'disabled' to block validation and also to remove any values or selections in case they showed up if the input was later re-displayed.
Bob
Thanks for the tip Bob!
The fields I am showing/hiding are all set as mandatory fields. ChronoForms v5 seems to skip the validation when the fields are set to 'display:none;' so this works well.
The fields I am showing/hiding are all set as mandatory fields. ChronoForms v5 seems to skip the validation when the fields are set to 'display:none;' so this works well.
It also seems to work if you make it a Custom container and put:
in the start code.
Rob
<div id="id-of-box" class="chronoform-container" style="display: none;">"in the start code.
Rob
The last " should not be in the code.
And there must be a </div> in the End code.
You can also make it a Panel with this in the start code:
And there must be a </div> in the End code.
You can also make it a Panel with this in the start code:
<div id="klachten" class="panel panel-default chronoform-container" style="display: none;">
<div class="panel-heading">klachten</div>
This topic is locked and no more replies can be posted.
