Requiring a ticket attachment if a particular dropdown option is selected

39 Comments

  • CJ Johnson

    Update: I have a working solution for my comment above! 

    First, I totally didn't realize that Fikri had already posted what I asked about above. Minus that final bracket, it's a perfect working code example of requiring an attachment on a form, period, no other field requirements. @... sorry to ping you about a year old comment on a Zendesk article but your comment on this saved me hours of work and headaches, you are my hero this week!! 

    Second, I am not confident the more official code example in the guide still works. I tried so many things to get it to work but also consistently got that 'formAttachmentDropdownClass is not defined', and while I'm an absolute beginner at javascript, I gotta say that I don't think it's an implementation issue, I can't see anywhere that it's being defined, either. 

    Fortunately for me, and possibly for whoever is reading this comment, you can still use Fikri's code to require an attachment on a form because it never references that class, because a dropdown isn't needed for that version. 

    1
  • Patrick Lieu

    Is there a way to force an attachment for only when a specific field is selected (and not from the intital form selection)?

    0
  • Jesper Rosenkrantz

    CJ Johnson My turn to ping you in an old thread ... I am looking for a solution for this, but it seems this doesn't work on newer themes. Do you have something set up that makes attaching files mandatory? And if so, does it require an older theme?

    0
  • Anastasia Kachanova

    Hi guys,

    Maybe anyone is familiar, if it's possible to use dynamic content in the below part (error message shown to end-user if there is no attachment selected) :

    var attachmentErrorNotification = 'Attachments: cannot be blank';

    Thanks in advance!

     

    0
  • Anastasia Kachanova

    Hi,

    Seems that "attachment" checkbox is not hidden anymore. Can anyone please check into this and advise how this field could be hidden again?

     

    Thanks,
    Anastasia

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Anastasia,
     
    Have there been changes to your theme's styles since the checkbox stopped hiding?  A change that conflicts with the Hide the checkbox field section could cause what you're seeing.
    0
  • Dikka Pradana

    can we make the "attachment" as a mandatory based on the value from the dropdown?

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Dikka,
     
    This tip walks through making the attachment required after a specific dropdown value is selected.  Is there an issue you're encountering when implementing?
     
    0
  • Noelle Cheng

    Christopher Kennedy are you able to assist me with my issue below? This code isn't working and I'm having trouble getting it to require attachments based on a selection. The attachment checkbox doesn't work.

     

    This doesn't seem to be working now. I'm able to fully submit a ticket without uploading an attachment when I select my option from the drop down. It's not requiring the attachment. When i show the attachment checkbox, i see that it never checks the box.

     

    My HC is currently on the below:

    Theme version 2.15.0
    Templating API v2

    Below is the code that are currently in the sections style.css and script.js. Items in bold and italic are what I updated to my specifics.


    STYLE.CSS (pasted at the bottom of the existing code)
    #request_custom_fields_7685982184091_label,
    #request_custom_fields_7685982184091 {
    display: none;
    }

    SCRIPT.JS (pasted at the bottom of the existing code)
    I have multiple forms and I need this to work only for a specific form. Can someone assist? Below is the code I'm using.

     

    // 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_7685982184091';
    var attachmentCheckboxId = '#' + attachmentCheckboxField;
    var attachmentErrorNotification = 'Attachment is required';
    var formDropdownClass = '.request_custom_fields_7686337209627';
    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 'Option 1' is selected
    function isFormAttachmentRequired() {
      return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
             $(formDropdownClass + ' a.nesty-input').text() === 'Option 1';
    }

    // 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(formAttachmentDropdownClass)) {
        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

Please sign in to leave a comment.

Powered by Zendesk