June 16, 2021 at 4:23 am
Hi all,
So I am looking forward to the Registration Form updates that are in the pipeline.
In the meantime I thought I would share a workaround that I came up with based on others users and team members previous work.
See https://eventespresso.com/topic/jquery-snippet-to-hide-question-based-upon-logic/
and
See https://eventespresso.com/topic/conditionally-hide-show-a-question-group-based-on-a-drop-down-question-value/
So we wanted to have a certain group of questions show based on what ticket a user purchased. As that is not an available function right now I came up with the following workaround.
On our site there were basically there are 4 types of tickets for this Event:
A foursome is 4 players and we need a Name/Email/Company for each player
Silver – 1 Foursome
Gold – 2 Foursomes
Platinum – 3 Foursomes
Diamond – 4 Foursomes
I created 4 Question Groups – Silver Gold Platinum Diamond – that contained Name/Email/Company for each player. So Silver had 4 Players, Gold had 8 Players and so on
I created 4 Radio button Questions and added them to the Registration Form (through Event)
Are you registering as a Silver Sponsor ?
Are you registering as a Gold Sponsor ?
…..and so on
The user picks a ticket and goes to Register Now
I had already created a site specific plugin so I added a Jquery to this plugin
that did the following
Hide all question groups related to player registration
If user answers Yes or No to the Question outlined above that it would show the Group that corresponded to that Question
Silver ? – Yes – show Silver Question Group
Gold ? Yes – show Gold Question Group
I used the jquery + attrib to pull part of the div id name so that each group could be identified (the class did not work as it is the same for all Question Groups)
My code is on github
https://gist.github.com/henihan/d5987071bffc21346b66966157d13ada
But I post it here too:
function ee_custom_show_question_conditionally() {
wp_add_inline_script('ee_form_section_validation','jQuery( document ).ready(function($) {
var text = $("div[id^=\'ee-reg-form-qstn-grp-Silver-\']");
$(text).hide();
$(".ee-reg-qstn-88").change(function() {
//Uncomment Below to Test value of Question so you can put in the IF statement "Yes" in this example
//var test=$(this).val();
//Uncomment Below to Show the Value to the browser
//alert(test);
$(this).val() == "Yes" ? $(text).show() : $(text).hide();
});
var text2 = $("div[id^=\'ee-reg-form-qstn-grp-Gold-\']");
$(text2).hide();
$(".ee-reg-qstn-89").change(function() {
//Uncomment Below to Test value of Question so you can put in the IF statement "Yes" in this example
//var testG=$(this).val();
//Uncomment Below to Show the Value to the browser
//alert(testG);
$(this).val() == "Yes" ? $(text2).show() : $(text2).hide();
});
var text3 = $("div[id^=\'ee-reg-form-qstn-grp-Platinum-\']");
$(text3).hide();
$(".ee-reg-qstn-90").change(function() {
//Uncomment Below to Test value of Question so you can put in the IF statement "Yes" in this example
//var testP=$(this).val();
//Uncomment Below to Show the Value to the browser
//alert(testP);
$(this).val() == "Yes" ? $(text3).show() : $(text3).hide();
});
var text4 = $("div[id^=\'ee-reg-form-qstn-grp-Diamond-\']");
$(text4).hide();
$(".ee-reg-qstn-91").change(function() {
//Uncomment Below to Test value of Question so you can put in the IF statement "Yes" in this example
//var testD=$(this).val();
//Uncomment Below to Show the Value to the browser
//alert(testD);
$(this).val() == "Yes" ? $(text4).show() : $(text4).hide();
});
});'
);
}
add_action('wp_enqueue_scripts','ee_custom_show_question_conditionally', 11);
I hope this helps some folk and thanks to all the Event Espresso Staff and also to Event Espresso members. Without the input of you all I would not have been able to do this.
Thanks again
Steph
|