How can I add an attribute to a form input?

Written Mar 30, 2013 15:46

Attributes are extra "values" that are added inside a from input tag like data='xxx' or readonly='readonly'. ChronoForms doesn't provide an input box where you can add these directly but using the JavaScript from this FAQ you may be able to add them by using the ChronoForms 'Class' box.

Note: this code was developed to work with the BootStrap code in Joomla! 3.0 to add place-holder labels to form text inputs. It should work with other attributes and inputs but the code may need to be adapted.

Here is the JavaScript snippet that you can add to a Load JS action in your form's On Load event:

window.addEvent('domready', function() {
  var text_inputs, classes, cl, attr, el;
  text_inputs = $$('.cfdiv_text input');
  text_inputs.each(function(el){
    classes = el.getProperty('class');
    classes = classes.split(' ');
    classes.each(function(cl, index){
      cl = cl.trim();
      if ( cl.contains('[') && cl.contains('=')) {
        var attr = cl.replace(/[\[\]]/g, '');
        attr = attr.split('=');
        attr[1] = attr[1].replace('+', ' ');
        el.setProperty(attr[0], attr[1]);
        classes[index] = '';
      }
    });
    classes = classes.join(' ');
    el.setProperty('class', classes);
  });
});

Note: This version will work only with text inputs, change the text_inputs variable to use other inputs.

To set an attribute you add a new class in the Text Box element Class box in square brackets. For example:

[placeholder=Sunday+lunch]

The code will find this and convert it into this attribute:

placeholder='Sunday lunch'

The string you use for the class should not include any spaces (you can use + instead and this will be converted to a space); and should not include any quotes (use HTML entities instead).

This structure is borrowed from the Zen Coding/Emmett syntax.

You could, for example, use this to set an input to Read Only with:

[readonly=readonly]

Any classes in square brackets will be converted to attributes and removed from the class set for the input.

Here's a text input in a ChronoForms with BootStrap using both of these classes:

FAQs