Enable/disable submit button in submit a request page

7 Comments

  • 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
  • Lydia C

    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.

Powered by Zendesk