How to hide dropdown fields based on dropdown selection?
Answered
Posted Apr 03, 2023
Hi,
How can we use custom code to make request form fields visible or invisible for end users based on dropdown selection?
0
15
Posted Apr 03, 2023
Hi,
How can we use custom code to make request form fields visible or invisible for end users based on dropdown selection?
0
15 comments
Hannah Lucid
@Greg Katechis - THANK YOU! I appreciate you sending this. I ended up getting the following code to work as well:
//Hide Subject and Pre-Fill when XXXXXXX Topic is selected
// Function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
validateAndToggleUI();
};
// Create a MutationObserver instance to watch value changes on request_custom_fields_XXXXXXX
var observer = new MutationObserver(observerCallback);
// Assuming request_custom_fields_XXXXXXX is the actual JS object
observer.observe(request_custom_fields_XXXXXXX, { attributes: true, attributeFilter: ['value'] });
function validateAndToggleUI() {
// Get the elements you want to hide
var subjectField1 = document.querySelector("#new_request > div.form-field.string.required.request_subject");
var requestSubject1 = document.querySelector("#request_subject");
// Check if the value is "XXXXXXX"
if (request_custom_fields_XXXXXXX.value === "FIELD VALUE TAG HERE" || "FIELD VALUE TAG HERE IF MULTIPLE") {
// If it's XXXXXXX, ensure the elements are not visible
subjectField1.style.display = "none";
// Pre-fill the subject field
requestSubject1.value = "XXXXXXX";
} else {
// If not, show the elements
subjectField1.style.display = "block";
// Clear the subject field if it's not the specific value
subjectField1.value = '';
}
}
// Function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
validateAndToggleUI();
};
// Create a MutationObserver instance to watch value changes on request_custom_fields_XXXXXXX
var observer = new MutationObserver(observerCallback);
// Assuming request_custom_fields_XXXXXXX is the actual JS object
observer.observe(request_custom_fields_XXXXXXX, { attributes: true, attributeFilter: ['value'] });
1
Jahn Bronilla
Hi Johnny J, you can actually create condition ticket field/s (customer facing or agent facing) based on the prior selection of the drop down.
This article might help you with this - https://support.zendesk.com/hc/en-us/articles/4408834799770-Creating-conditional-ticket-fields
0
Johnny J
Hey Jahn Bronilla,
Thanks for your suggestion, creating conditional fields won't work with my request. When users choose a particular dropdown value from a dropdown menu, I want to make a certain field invisible to them. Fields ought to appear when a user chooses an alternative dropdown. Currently, when user selects another drop-down option, the conditional fields totally hide all of the fields for them. So, using custom code will enable me to hide a certain field from the user based on their selection.
Just an example, there is a dropdown called State and the user chooses Georgia. Only certain fields should be visible upon selection, and the conditional fields hides all required field when the user chooses any other state than Georgia.
0
Arianne Batiles
Hi Johnny,
Using conditional ticket fields can hide/display whole fields, but not options within a single field. Some customers have done custom coding to their Help Centers to change the appearance for end-users. Unfortunately, queries regarding custom coding and troubleshooting issues related to the customizations you have made are outside the range of the support we are able to offer.
We have an app that can hide field options of a drop-down field which is called Ticket Field Manager App. The app allows you to hide options for a given dropdown field. However, this is only applicable in the agent interface and not to the request form. See Installing and using the Ticket Field Manager app for more details.
0
Johnny J
Hey Arianne Batiles,
Thanks for your response, I understand that queries about custom coding fall outside of your support's scope. But, in the past I've seen and had others assist us with the code, so I thought I'd try and see if anyone could assist with the custom code:)
0
Arianne Batiles
Hi Johnny,
Unfortunately, the previous community post has been archived. You might have some luck with this 3rd-party app called Formset since it allows customers to set the visibility of certain field options as well as it claims to work for both the agent and end-user experience.
0
Johnny J
Thank you Arianne Batiles
Hey @Ahmad Zaid, Thank you, I'll have a look at it, but is the group only for developers?
0
Jakub
Hello Johnny, if you happen to still need some assistance with this, I was able to hide certain ticket fields based on the selection in another field, this involves some if statements and dom observers, but can be achieved. Let me know if you would like me to share this workaround. Have a good day!
0
Johnny J
Hello Kuba, yes, it's great to hear that you've found a workaround. Appreciate your willingness to share this solution. Please do share the details when you have a moment, it could be very helpful for our team. Thank you.
0
Jakub
First, you will need to hide the fields that you want to show later on based on the selection in your dropdown field. In my case, I am using the code for both subject and description fields and hiding it with CSS (Customize > Edit code > styles.css)
#new_request > div.form-field.string.required.request_subject {
display: none;
}
#new_request > div.form-field.text.required.request_description {
display: none;
}
Then I apply the following code to show those fields based on a selection in my custom dropdown ticket field.
PLEASE MAKE SURE TO CHANGE THE TICKET FIELD ID AND THE VALUE YOU WANT TO USE TO TRIGGER other fields to show up, I highlighted them in the code:
function validateAndToggleUI() {
// Get the elements you want to hide
var subjectField = document.querySelector("#new_request > div.form-field.string.required.request_subject");
var descriptionField = document.querySelector("#new_request > div.form-field.text.required.request_description");
// Check if the value is "canyon"
if (request_custom_fields_9827560964756.value === "canyon") {
// If it's canyon, ensure the elements are visible
subjectField.style.display = "block";
descriptionField.style.display = "block";
} else {
// If not, hide the elements
subjectField.style.display = "none";
descriptionField.style.display = "none";
}
}
// Function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
validateAndToggleUI();
};
// Create a MutationObserver instance to watch value changes on request_custom_fields_9827560964756
var observer = new MutationObserver(observerCallback);
// Assuming request_custom_fields_9827560964756 is the actual JS object
observer.observe(request_custom_fields_9827560964756, { attributes: true, attributeFilter: ['value'] });
0
Sign in to leave a comment.