English (US)

Enable/disable submit button in submit a request page

Lydia C

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 Comments

  • Tipene Hughes
    • Edited
    Zendesk Developer Advocacy
    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
      
     
    2
  • Lydia C
    • Edited

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

    0
  • Admin - Trane Support (JH)

    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?

    0
  • Viktor Osetrov
    Zendesk Customer Care
    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
    0
  • Admin - Trane Support (JH)

    Tipene Hughes or Lydia C

    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? 

    0
  • Viktor Osetrov
    Zendesk Customer Care
    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
    0
  • Lydia C

    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.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post
Powered by Zendesk