Read only textbox

I want to create a read only textbox (I dinamically load the value inside it).

In your opinion, what is the best way for doing this? I see some ways:

1) Custom element, with HTML code like this

<input name="fieldname" id="fieldname" type="text" readonly="readonly" value="<?php echo $myvalue;?>" />

2) Header element for displaying value + Hidden element to store in the form

Thank you

Hi Abletech,

I'd probably use a Custom element just as you suggest.

There probably should be an input box for attributes like readonly - may be in a future release.

Bob

I have found another very elegant way: adding a Load JS action, after the Show html, with this Javscript code:

window.addEvent('domready', function() {
    if (document.form_name.field_name_1.value!="")
       document.form_name.field_name_1.readOnly = true;
    if (document.form_name.field_name_2.value!="")
       document.form_name.field_name_2.readOnly = true;
    // and so on...
});

So I can made readonly fields only when I successfully put some data in previous PHP action (Custom code valorizing $form->data array), and the form definition stays simple.

Hi abletech,

Very neat. Just for info you can simplify the code using MooTools something like this

window.addEvent('domready', function() {
  $$('#form_id input').each(function(el) {
    if (el.value != "") {
      el.readOnly = true;
    }
  });
});

Not tested and may need debugging

Bob

Hi forum,

looking fo a solution to this I found this post. Just for completeness' sake here is another solution using the JS apporach.

1. In the field's property dialog add a css class (I use the html property names, like 'readonly' and 'disabled').
2. Then in the form's actions panel add a loadJS action before the showHTML action and insert the following code

window.addEvent('domready', function() {
    $$('input.readonly').set('readonly', 'readonly');
    $$('input.disabled').set('disabled', 'disabled');
});

Note: For each css class or id you have to adapt the code accordingly, of course.
That gives you a neat way of chosing the desired fields directly.

Cheers,
Mortimer

There probably should be an input box for attributes like readonly - may be in a future release.

Bob

Hi
As this post is over one year old, I may ask if this feature has been implemented in the meantime?

Best regards
Alex

HI Alex,

Not that I know of, you can still add the attribute using JavaScript if you need it.

Bob

I agree that a built in option would be good. Until now I have manually edited the code but then has to re-edit it manually every time that I made a change via the wizard.

JS seems a much better option. That said, I tried the following:

Added a JS block onLoad with the following code

$(".readonly").attr("readonly", false);

I then gave the fields that I wanted to be readonly a field class of readonly.

That did not work....... so obviously I am doing something wrong.

Hi abasel,

I think that is JQuery syntax, not MooTools. Please try this:

window.addEvent('domready', function() {
  $$('.readonly').each(function(item){
    item.readOnly = true;
  });
  $$('select.readonly').each(function(item){
    item.disabled = true;
  });
});

The extra code for select drop-downs is needed because they don't have a 'readonly' attribute to set.

ChronoForms doesn't have a 'class' option for radio buttons or checkboxes, if you add the class using JavaScript then the same code should also work with them.

Bob