Requiring attachment based on dropdown selections (multiple forms)
Posted May 03, 2024
I have the code below and was wondering if someone in the community can help. :) This code is supposed to require an attachment if a specific dropdown option is selected. This was taken from a post someone had back done a few years ago, linked here.
My issue is that I have this code for one form (Form A) and then I copied and pasted it right underneath each other to help require the attachment for my other form (Form B). I changed the custom field value to align with Form B.
The issue is that when the code is repeated, it only ends up keeping the requirement for the “most recent” one, in this case, Form B. Then I end up losing the requirement for Form A. Any help would be amazing!
// REQUIRE ATTACHMENTS FOR FORM A
// Function to start observing node for mutations
var startObserveMutations = function (nodeSelector, options, callbackFunction) {
var node = document.querySelector(nodeSelector);
if (node) {
var observer = new MutationObserver(callbackFunction);
observer.observe(node, options);
return observer;
}
};
// Callback function to execute when mutations in form attachments or dropdown are observed:
// clear or select Attachment checkbox according to dropdown
var mutationObservedForm = function (mutationsList) {
mutationsList.forEach(function (mutation) {
if (mutation.type == 'childList') {
setFormAttachmentCheckbox();
}
});
};
// Define some variables for requiring form attachments
var attachmentCheckboxField = 'request_custom_fields_XXXXXXX';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'User request template must be attached';
var formDropdownClass = '.request_custom_fields_AAAAAAAA';
var formObserveMutationOptions = { childList: true, subtree: true };
// Clear or select checkbox according to dropdown and attachments:
// Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
function setFormAttachmentCheckbox() {
if (isFormAttachmentRequired()) {
if ($('#request-attachments-pool .upload-item').length) {
selectCheckbox(attachmentCheckboxId);
}
else {
clearCheckbox(attachmentCheckboxId);
}
}
else {
selectCheckbox(attachmentCheckboxId);
}
}
// Return true if dropdown option 'Add 5+ Users with Spreadsheet' is selected
function isFormAttachmentRequired() {
// Get the text of the selected option in the dropdown
// var selectedOptionText = $(formDropdownClass + ' a.nesty-input').text();
return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
$(formDropdownClass + ' a.nesty-input').text() === 'Add 5+ Users with Spreadsheet';
// (selectedOptionText === 'Add 5+ Users with Spreadsheet');
}
// Select checkbox
function selectCheckbox(eltselector) {
$(eltselector).prop('checked', true);
}
// Clear checkbox
function clearCheckbox(eltselector) {
$(eltselector).prop('checked', false);
}
// If attachment checkbox field exists:
// Select the checkbox if attachment is not required
// Watch for changes to attachments and dropdown
if ($(attachmentCheckboxId).length) {
if (!isFormAttachmentRequired(formDropdownClass)) {
selectCheckbox(attachmentCheckboxId);
}
startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);
}
// Adjust attachment error notification
var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
if (attachmentErrorElt.length) {
attachmentErrorElt.text(attachmentErrorNotification);
};
//SET SUBJECT AND DESCRIPTION FOR
if ($("#request_issue_type_select").val() == "22472280876187") {
$("#request_subject").val("Logan Connect Portal Credential Request");
$('#request_description').val("Portal Request");
$('.form-field.string.required.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$("#request_custom_fields_22487999583643").keyup(function(event) {
});
};
// REQUIRE ATTACHMENTS FOR FORM B
// Function to start observing node for mutations
var startObserveMutations = function (nodeSelector, options, callbackFunction) {
var node = document.querySelector(nodeSelector);
if (node) {
var observer = new MutationObserver(callbackFunction);
observer.observe(node, options);
return observer;
}
};
// Callback function to execute when mutations in form attachments or dropdown are observed:
// clear or select Attachment checkbox according to dropdown
var mutationObservedForm = function (mutationsList) {
mutationsList.forEach(function (mutation) {
if (mutation.type == 'childList') {
setFormAttachmentCheckbox();
}
});
};
// Define some variables for requiring form attachments
var attachmentCheckboxField = 'request_custom_fields_XXXXXXX';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'User request template must be attached';
var formDropdownClass = '.request_custom_fields_BBBBBBBB, .request_custom_fields_7287062617627';
var formObserveMutationOptions = { childList: true, subtree: true };
// Clear or select checkbox according to dropdown and attachments:
// Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
function setFormAttachmentCheckbox() {
if (isFormAttachmentRequired()) {
if ($('#request-attachments-pool .upload-item').length) {
selectCheckbox(attachmentCheckboxId);
}
else {
clearCheckbox(attachmentCheckboxId);
}
}
else {
selectCheckbox(attachmentCheckboxId);
}
}
// Return true if dropdown option 'Add 5+ Users with Spreadsheet' is selected
function isFormAttachmentRequired() {
// Get the text of the selected option in the dropdown
// var selectedOptionText = $(formDropdownClass + ' a.nesty-input').text();
return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
$(formDropdownClass + ' a.nesty-input').text() === 'Add 5+ Users with Spreadsheet';
// (selectedOptionText === 'Add 5+ Users with Spreadsheet');
}
// Select checkbox
function selectCheckbox(eltselector) {
$(eltselector).prop('checked', true);
}
// Clear checkbox
function clearCheckbox(eltselector) {
$(eltselector).prop('checked', false);
}
// If attachment checkbox field exists:
// Select the checkbox if attachment is not required
// Watch for changes to attachments and dropdown
if ($(attachmentCheckboxId).length) {
if (!isFormAttachmentRequired(formDropdownClass)) {
selectCheckbox(attachmentCheckboxId);
}
startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);
}
// Adjust attachment error notification
var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
if (attachmentErrorElt.length) {
attachmentErrorElt.text(attachmentErrorNotification);
};
});
0
2
2 comments
Noelle Cheng
4970836779162 Thank you so much, this works except when I added a third form that requires attachments.
Below is my code. I added form C to the bottom and I added Form C's dropdown option that requires the attachment into the “Function to determine if attachment is required”. I don't believe I added the correctly so that may be why the attachment is being required on all options. Also it seems all forms are using the Form C's attachment required error message rather than what is truly stated.
Lastly, I noticed that it was also changing my Attachment field name when the attachment isn't present. it reverted back to the original text. Do you know how to maintain the custom field name?
Custom Attachment field name
Original (reverted when the attachment isn't present or if any required fields aren't populated as expected)
0
Jakub
The issue you're encountering is due to the redeclaration of functions and variables for both Form A and Form B. When you copy and paste the code, the second block of code (for Form B) is overwriting the functions and variables of the first block (for Form A), because they have the same names.
To fix this, you need to encapsulate the logic for each form in separate scopes and ensure that variable names and function names are unique for each form. Here's how you can refactor the code to work for both forms:
Make sure to replace 'request_custom_fields_XXXXXXX' with the actual custom field ID for the attachment checkbox for each form, and replace the '.request_custom_fields_AAAAAAAA' and '.request_custom_fields_BBBBBBBB, .request_custom_fields_7287062617627' with the actual classes for the dropdowns for Form A and Form B, respectively.
0
Sign in to leave a comment.