How do I inject javascript/htmlDOM to edit value of new ticket decription textarea?

[Jake]

Hi,

We’re integrating our freshdesk support url into a web view in our iOS app. I want to auto populate the description field of a new ticket submission by using javascript to inject information about the user from the app by htmlDOM. We’re having trouble doing so, because while I can successfully modify certain elements of the new ticket page this way, I can’t seem to update text in the textarea. I’m trying getElementById, then to set the .value & .innerHTML attributes, but neither work. Could you please advise on how we can achieve this? This is the url: Submit a ticket : .

Many thanks for your help.

[ThomasH]

Hey @Jake

the textarea you highlighted could be manipulated, I just tried in the console with:

$("#helpdesk_ticket_ticket_body_attributes_description_html").value = 'Test123'

But the whole story is a bit trickier.

The textarea you refer to actually is hidden (“display: none”) and in my interpretation is the description in HTML format, the ticket is created with.

The value of this textarea is autom. updated as soon as you change something in the editor above. You can see that, when removing the “display: none” and typing something into the editor.

So you would need to manipulate the main editor, which I was able to do with this:

document.getElementsByClassName("fr-view")[0].replaceChildren("Tes123t")

This changes the editor’s content, but does not yet trigger that the content trickles over as html to the textarea. You may need to trigger the event manually in jscript.

Hope that helps
Tom

[Jake]

Tom,

Thanks a lot for your help, I have no experience with this area. I tried your solution and it is working for me, in that I can successfully manipulate the text value using the following line:

document.getElementsByClassName(“fr-view”)[0].replaceChildren(“Tes123t”)

My issue now is that the new text value appears over the placeholder (see picture). I’d like to thus also set the placeholder value to empty, but as before it doesn’t work, and the above line appears only to work for the text. Any idea how to achieve that? It doesn’t seem possible to customise the placeholder via the freshdesk ticket builder. Cheers.

[ThomasH]

Hey

I fiddled around a bit in our test instance and made the following work:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
      console.log("Delayed for 1 second.");
      let element = document.getElementsByClassName("fr-element fr-view");
      console.log(element[0]);
      element[0].replaceChildren("Test123");
      element[0].dispatchEvent(new Event("input"));
    }, "1000");
  });

</script>

I put this code at the end of the submit ticket page in the portal:

I did NOT create a ticket, so I don’t know exactly if it works.
But it may be a starter.

I need to clock out now, but could give some explanation tomorrow.

Best
Tom

[ThomasH]

Disclaimer: I have not learned web dev, just do trial and error! So there may be flaws in it - So maybe someone else could check up and give advice on how to improve it.

Tom

[Jake]

Fantastic Tom, that’s done it. I removed the event listener as the page was already loaded and worked like a charm. I guess it’s the input event that signals the placeholder removal. Thanks again.