Enable/disable submit button in submit a request page | Community
Skip to main content

Enable/disable submit button in submit a request page

  • April 6, 2022
  • 7 replies
  • 0 views
L

Hi,

I'm customizing "submit a request" page to disable "submit" button if subject and description are empty. I added some code to the subject input box to check content in both fields (subject and description) and if there is, enable "submit". This works fine.

When I add some code to "description", it doesn't work... the on change event for the textarea is never fired. Example:

var requestCommentTextarea = document.querySelector('.request_description textarea');
requestCommentTextarea.addEventListener('change', function (event) {
    console.log(event.target.value);
});
 
The full code is like:

var requestCommentTextarea = document.querySelector('.request_description textarea');
var usesWysiwyg = requestCommentTextarea && requestCommentTextarea.dataset.helper === "wysiwyg";

function isEmptyPlaintext(s) {
    return s.trim() === '';
}

function isEmptyHtml(xml) {
    var doc = new DOMParser().parseFromString(`<_>${xml}</_>`, "text/xml");
    var img = doc.querySelector("img");
    return img === null && isEmptyPlaintext(doc.children[0].textContent);
}

var isEmpty = usesWysiwyg ? isEmptyHtml : isEmptyPlaintext;

if (requestCommentTextarea) {
    requestCommentTextarea.addEventListener('input', function () {
        console.log("event");
        if (isEmpty(requestCommentTextarea.value)) {
            requestSubmitButton.disabled = true;
        } else {
            requestSubmitButton.disabled = false;
        }
    });
}

 
Maybe is there better way to implement this. Any ideas? 
Thanks.
 
 

    7 replies

    Tipene
    • Tipene
    • April 7, 2022
    Hi Lydia,
     
    Thanks for reaching out!
     
    The description field on the "submit a request" page is actually an iframe which is pulled in for the wsiwyg functionality. Because of that, you'll need to target the appropriate nodes within the iframe. Additionally, the text is added to the DOM within a paragraph element so we can't easily listen for change or input events. That said, here's an example I put together using a mutationObserver which should get you the desired results:
     
    window.addEventListener('load', () => {
    //  Get iframe element
      const iframe = document.getElementById('request_description_ifr');
      
    //  Get body element within iframe
      const iframeContent = iframe.contentWindow.document.getElementById('tinymce');
      
    //  Get text area (<p> element)
      const textArea = iframeContent.childNodes[0];
      
    //  Get the submit button
      const button = document.querySelector('[value="Submit"]');
     
    //  MutationObserver to watch for changes to the DOM at the textArea (<p> element)

      const config = { attributes: true, childList: true, subtree: true };
      let descriptionObserver = new MutationObserver((list) => {   
      list[0].target.textContent ? button.disabled = true : button.disabled = false;
      });
       
      descriptionObserver.observe(textArea, config)
    })
     
    I hope this helps! Feel free to reach out with any questions.
     
    Tipene
      
     
      L
      • Lydia13
      • Author
      • April 8, 2022

      Thanks, Tipene, for the explanation and your code 😀. It resolves the issue I was having.

      A
      • Admin31
      • July 28, 2023

      Hey all - I'm looking to implement something similar, but would like to disable the submit button based on the status of a custom property (specifically a checkbox) that is visible in the form. Does anyone have something they've already implemented?

      Viktor14
      • Viktor14
      • July 29, 2023
      Hello Admin Trane Support (JH),

      Good question. I have tested native integration with a checkbox ticket field. 
      For example, it looks like I couldn't "Submit" button untill some mandatory fields be blank:

      However, in reality checkbox fields only, is optional. More information about it here.
      It means that you can submit your request without Checkbox activation. 

      As a solution we can recommend creation of custom code via Building a custom ticket form with the Zendesk API.

      Please accept our apologies for some limitations with that.
      Thanks
      A
      • Admin31
      • July 31, 2023

      @tipene or @lydia13

      Any recommendations on how I can modify your code to check the status of a custom checkbox field and disable the submit button when it is checked / unchecked? 

      Viktor14
      • Viktor14
      • July 31, 2023
      Hello Admin Trane Support (JH),

      Thanks for your response. I have tested this Node.js example 
      with a combination code from this sample.
      It works for me
       
      Hope it helps
      L
      • Lydia13
      • Author
      • August 1, 2023

      Sorry for not answering before. In my case I have an onchange event in the checkbox that checks the checkbox itself and the other required fields to enable/disable the submit button. So very similar to your solution.

      Terms & ConditionsCookie settingsAccessibility statement