How can we update displayed text in cml:text or cml:textarea using javascript on crowdflower platform?

Question

I am designing crowdsourcing interface on crowdflower platform, during design, I need cml:text or cml:textarea to accept workers's text input. Here is an example:

<cml:textarea label="my_name" id="my_id" validates="required" default="123456"/>

The default value shown in this text box is "123456", however, it will disappear after user clicking. What if I want to preload some content which can be reused (doesn't disappear) by the workers? I tried the following methods:

document.getElementById('my_id').html() = "678910";
document.getElementById('my_id').innerHTML ="678910";
document.getElementById('my_id').value = "678910";
document.getElementById('my_id').default = "678910";
document.getElementById('my_id').placeholder = "678910";
document.getElementByName('my_name').html() = "678910";
...

None of them works. Is it doable to update text in cml:text or cml:textarea on crowdflower platform?

Answer 1

I ran into this today! It seems that document.getElementById or its alternatives do not work for cml input tags. Here is a workaround using jQuery that worked for me. Put your cml:textarea in a div, then use find to get the inputs inside the parent div.

require(['jquery'], function($) {
  var my_element = $("#parent_element_id").find("input")[0]; // first input element in the list
  my_element.value = "678910";
});

Hope this helps!