Setting custom field read-only with javascript

[Alexey Paveliev]

It was an eye opener for me that one can use JS to hack field behavior.

Here is the link to an example by Jamie Echlin.

Can I set Multi user picker read-only this way? Can I just copy javascript to field's description in Edit Custom Field Details dialog?

I am not a web developer and I could appreciate assistance.

I need display HTML below as Disabled text area

<div class="ajax_autocomplete" id="customfield_10715_container">
    <textarea class="textarea long-field" cols="40" id="customfield_10715" name="customfield_10715" rows="3" autocomplete="off"></textarea>
    <div class="field-tools">
        <a class="popup-trigger" href="#"><img alt="" height="16" name="multiuserImage" src="/images/icons/filter_public.gif" title="Select a user(s)" width="16"></a>
    </div>
    <div id="customfield_10715_results" class="ajax_results"></div>
    <div class="description">Start typing to get a list of possible matches.</div>
</div>

[Nitram · Accepted solution]

HI,

see the below coding, the html code has to be like this but since you are not able to modify it,I will provide you the JS code, copy and paste it in the field description, it will work.

<div class="ajax_autocomplete" id="customfield_10715_container">
    <textarea class="textarea long-field" cols="40" id="customfield_10715" name="customfield_10715" rows="3" autocomplete="off" readonly="Y"></textarea>
    <div class="field-tools" style="display:none;">
        <a class="popup-trigger" href="#"><img alt="" height="16" name="multiuserImage" src="/images/icons/filter_public.gif" title="Select a user(s)" width="16"></a>
    </div>
    <div id="customfield_10715_results" class="ajax_results"></div>
    <div class="description">Start typing to get a list of possible matches.</div>
</div>

JS code - Copy and paste it in the field description, it will work.

<script type = "text/javascript">
    document.getElementById("customfield_10715").onmouseover = function(){
        document.getElementById("customfield_10715").readOnly = true;
        jQuery('.field-tools').hide();
        jQuery('.ajax_results').hide();
        jQuery('.description').hide();
    }
</script>

Hope this helps.

[Alexey Paveliev]

It rocks! The only issue is one more field of the same type gets disabled as well.

It uses same AJAX/Jquery pop-up. I'd like to have it enabled. Is it possible?

<div class="ajax_autocomplete" id="customfield_10402_container">
        <textarea class="textarea long-field" cols="40" id="customfield_10402" name="customfield_10402" rows="3" autocomplete="off">groovybot</textarea>
        <div class="field-tools" style="display: none;">
                    <a class="popup-trigger" href="#"><img alt="" height="16" name="multiuserImage" src="/images/icons/filter_public.gif" title="Select a user(s)" width="16"></a>
                </div>
                    <div id="customfield_10402_results" class="ajax_results" style="display: none;"></div>
            <div class="description" style="display: none;">Start typing to get a list of possible matches.</div>
            </div>

[Alexey Paveliev]

Based on Nitram answer I with some help was able to come up with this:

<script type = "text/javascript">
jQuery(function() {
  var container = jQuery("#customfield_10715_container");
  jQuery('#customfield_10715').attr('disabled', 'disabled');
  container.find('.field-tools').hide();
  container.find('.ajax_results').hide();
  container.find('.description').hide();
});

</script>

This blocks one multi user picker but leave others functional

[Nitram]

<script type = "text/javascript">
    document.getElementById("customfield_10402").onmouseover = function(){
        jQuery('.field-tools').show();
        jQuery('.ajax_results').show();
        jQuery('.description').show();
    }
</script>

This answer is for the new question,Hope this helps

[Alexey Paveliev]

I appreciate your help very much. Look at my answer: sub elements are disabled only within the container NOT document wide. Hence no impact on other custom fields

[Nitram]

Hi ,

You can use the following attribute, which will allow you to send the data to the server while submitting,Hope this helps.

var fieldname= document.getElementById('customfield_xxxx').readOnly = true;

[Alexey Paveliev]

Look I Receive the HTML code quoted in original question from Jira in my browser/ I cannot modify it but I can apply JS to it. So I need to disable manual text entry to text area AND disable/hide Icon for AJAX popup with Jira user selector.

Can you provide complete screep thet would do that when pasted to field description in Jira admin interface?

[Alexey Paveliev]

Look I Receive the HTML code quoted in original question from Jira in my browser/ I cannot modify it but I can apply JS to it. So I need to disable manual text entry to text area AND disable/hide Icon for AJAX popup with Jira user selector.

Can you provide complete script that would do that when pasted to field description in Jira admin interface?

[Felix Grund (Scandio)]

You can give your textarea a attribute readonly. Then it will be disabled for user input and its data will still be sent to the server:

<textarea readonly>...</textarea>

[Alexey Paveliev]

Look I Receive the HTML code quoted in original question from Jira in my browser/ I cannot modify it but I can apply JS to it. So I need to disable manual text entry to text area AND disable/hide Icon for AJAX popup with Jira user selector.

[JamieA]

You probably shouldn't set it to disabled because then the browser won't send the form value, and then jira may blank out the value when the form is submitted.

It's not that straightforward, because you also need to hide the user picker trigger. The code to do this is in the behaviours plugin if you want to take a look at that.

[Alexey Paveliev]

Sounds like I need to look at it. Does it work well with Groovy script runner working behind the scene?

[JamieA]

They're independent of each other but they don't have negative interactions. Basically you write groovy code which operates on the web UI, as an alternative to writing javascript. It's slightly involved, but you will get the hang of it if you try a couple of the examples.

[Sreenivasaraju P]

You can use script for making any field readonly.

var fieldname= document.getElementById('customfield_xxxx');

fieldname.disabled=true;

[Alexey Paveliev]

There are other scripts working on this part of the page. Need to hide user picker ajax control and so on.