I have a requirement like, when the end user clicks on the list of users, then an input text field should get populated. the input field should be non-editable. lets say the input field value is "{!userText}" I want to make a field read only. When i make it as disabled=true. It is not transferring the value to the controller class. This input text field will receive value from JSON generator on windows load. I want the end user to click on any one of the list of users displayed.

Here is the script:

function addLoadEvent(func)
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
        window.onload = func;
        window.onload = function() 
            if (oldonload)


function reimburseDocuments() {
    var userNames = {!documentJson};
    var flag = {!jsFlag};
    return userNames[flag];
function OfferOptions() {
    var users = reimburseDocuments();
    var html = '';
    if (users != null) {
        for (var i = 0; i < users.length; i++) {
            html += ''
                    + '<div>[<b> <a href="javascript:PickValue('
                    + i
                    + ');" title="Click to set as \'User Name\'">'
                    + users[i]
                    + '</a> ]</b></div>'
    var panel = document.getElementById('p:f:pb:pbs:pbsi:panel');
    panel.innerHTML = html;
function PickValue(index) {
    var name = document.getElementById('p:f:pb:pbs:pbsi:name');
    // this field has to be made read-only
    name.value = reimburseDocuments()[index];


 public String documentJson {
        get {
                //Map<String, List<String>> m = new Map<String, List<String>>();
                Map<Boolean, List<String>> m = new Map<Boolean, List<String>>();
                m.put(jsFlag, getuserNames());
                system.debug('** Map Value ** '+m+'** JSON Value **'+json(m));                
                return json(m);

    // creating JSON generator Object and returning it as String
    private String json(Object o) {
            JSONGenerator generator = JSON.createGenerator(false);
            return generator.getAsString();

Here {!jsFlag} is set to true in constructor. so JSON retrieves value on load (that is list of users). To make that name field "readonly" But it is not working.

var j$ = jQuery.noConflict();
j$(document).ready(function() {
        var userField = j$(getHtmlId('{!$Component.form.pb.pbs.pbsi.name}'));
function getHtmlId(cid) {
    return "#"+cid.replace(/(:)/g,'\\\\$1');

2 Answers 2


As you say, setting the html input to be disabled stops the value being returned to the page. This isn't Force.com behaviour as such, but HTML / browser behaviour. There is another attribute readonly that you can set true which should mean the field can't be edited but the value of the field is sent back to the server.

You can set this attribute as a pass-through on a field in VisualForce like:

<apex:inputText value="{!Account.Name}" html-readonly="true" />
  • html-readonly will prevent the keyboard input to the field right ? , so we don't have to explicitly set the value for read-only= true via jquery or js ?
    – AjaySFDC
    Sep 30, 2014 at 14:42
  • 1
    yes, as soon as it goes on the page it will look like <input type="text" readonly="true"... so you don't need to do anything else.
    – Dominic
    Sep 30, 2014 at 14:43
  • There's no way to conditionally set this to false, correct? For instance, I can't say html-readonly="{!IF(a > b),'true','false')}", since it's used in HTML like <input readonly>. i.e. the presence of the parameter implies true Apr 30, 2015 at 14:34

Or you can always use disabled="true" like this

<apex:InputText label="User ID" value="{!formattedId}" disabled="true" />
  • Like What...???? Dec 1, 2014 at 13:48
  • Unsupported attribute
    – NickJ
    Jun 28, 2016 at 9:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .