NinaMcI
Active member
I would like to add some optional custom user fields to the registration form, but have them in a show/hide toggle format so as not to put users off if they see a lengthy form to fill in.
I have succeeded in doing this by adding the code below to the register_form template:
However, clicking the toggle button brings up the Error Panel as the user hasn't completed the captcha or ticked the Terms & Conditions at this stage yet.
Could any of you super coders suggest a work-around which would prevent the Error Panel from appearing if the user clicks on the toggle button?
Naturally, I still want the Error panel to appear if all required fields haven't been completed on clicking the Sign Up button at the end.
I have succeeded in doing this by adding the code below to the register_form template:
Code:
<fieldset>
<button onclick="myFunction()">Text here</button>
<div id="myDIV" style="display: none;">
<xen:include template="custom_fields_edit">
<xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
</xen:include>
</div>
</fieldset>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Could any of you super coders suggest a work-around which would prevent the Error Panel from appearing if the user clicks on the toggle button?
Naturally, I still want the Error panel to appear if all required fields haven't been completed on clicking the Sign Up button at the end.