Recent searches

No recent searches

Enable/disable submit button in submit a request page

Answered
image avatar

Lydia C

Posted Apr 06, 2022

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.
 
 

0

7

7 comments

Date
    image avatar

    Tipene Hughes

    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

    image avatar

    Lydia C

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

    0

    image avatar

    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

    image avatar

    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

    image avatar

    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

    image avatar

    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

    image avatar

    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're looking for?

    New post