Customer experience | Sales, Customer Insights,...

Is there Conditional Logic on Event forms?

(0) Share

Report

Posted on by NJD365Partner

I would like conditional logic on event registration forms, something like - if Attendee Type = Student, display 2 additional fields on the form. Is this possible?

All responses (5)

Answers (0)

KishoreBethi 5 on at

Like (0)

Report

RE: Is there Conditional Logic on Event forms?

Hi Clofly,

The above logic works fine if there is only one select field. If the form has multiple dropdowns and i want to hide/show the certain fields based on different dropdown values. Can you suggest the best way to solve this?
cloflyMao 25,202 on at

Like (0)

Report

RE: Is there Conditional Logic on Event forms?

Hi NJD365Partner,

It will be glad if my answer could help you.

However in forum, we could only give a solution in post.

Please contact to developers in your team or your partners for deployment.

You could ask any question when setting up the customization code.

Regards,

Clofly

Please kindly mark as verified if you had found any anwser helped, it would be really appreciated.
Suggested answer

NJD365Partner 67 on at

Like (0)

Report

RE: Is there Conditional Logic on Event forms?

Wow! Thank you Clofy. Would you be interested in helping us set this up for an hourly fee? Thank you for the in-depth response.
Suggested answer

cloflyMao 25,202 on at

Like (1)

Report
RE: Is there Conditional Logic on Event forms?

Hi NJD365Partner,

You can achieve it with some javascript/typescript code.

(Event website is built with Angular, and Angular is written in a superset of JavaScript called TypeScript.)

In Angular, there shall be many approaches to show/hide fields based on selected option value,

here is my solution:

1. In custom-registration-fields.component.ts file, (folder path src\app\components\eventregistration\attendee\custom-registration-fields)

create a string type variable to store the selected option value,

create a function to assign selected option value to the variable.

public selectedOption: String = ""; public showField(val: String) { this.selectedOption = val.substring(2, val.length).replace(/\s/g, ""); }

Due to the original format of the selected option value will be something likes these:

01: XXX,

02: YYY,

so I use substring method to extract the actual value we want, then remove any possible spaces with regex.

2. In custom-registration-fields.component.html,(same folder with ts file)

Jump to single choice element, (It is under  comment)

bind variable assignment function to onChange event of select element, and pass the selected option value as parameter to the function. ($event.target.value)

There are 4 types for custom registration field(simple text, boolean, single choice, multiple choice),

in my demo, I only added two simple text type fields, so here I just added condition checking statement to simple text element.

Add selectedOption == 'Student' condition to ngIf directive of single text element.

Test result:

By default there is only an optionset field:

There are three options in optionset field.

If I choose Teacher or Manager, nothing happens.

If I choose Student, then other two hidden fields will show.

Regards,

Clofly
Suggested answer

d_radulova 2 User Group Leader on at

Like (0)

Report

RE: Is there Conditional Logic on Event forms?

Hi @NJD365Partner,

I think you might need some custom JavaScript for this. And don't make the hidden fields mandatory. ;)

Thanks,

-DD