Forums

Read only textbox

abletech 20 Sep, 2011
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
GreyHead 20 Sep, 2011
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
abletech 20 Sep, 2011
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.
GreyHead 21 Sep, 2011
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
mbarten 06 Aug, 2012
1 Likes
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
wnedoe 13 Jan, 2013

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
GreyHead 14 Jan, 2013
HI Alex,

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

Bob
abasel 03 Feb, 2013
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.
GreyHead 09 Feb, 2013
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
This topic is locked and no more replies can be posted.