Trying to write a custom form field that concatenates <input> and <select> values

[Chris Bold]

I am a novice dabbler in Joomla PHP. I can build custom templates and simple frontend modules. I’m trying to write my first custom form field. I’ve gone over the documentation, reviewed several threads and examples, but I'm having trouble understanding the architecture and syntax.

The field I want to create is for CSS dimensions, where the User enters a number and a selects a unit .

The field would concatenate these values. So if the User entered the number 22 and selected ‘px’ from the dropdown box, the field would return a value of ‘22px’. Honestly I am kind of surprised no one has written one already.

I have set up the basic architecture so that the field shows up in my custom template. But I’ve gotten several syntax errors.

I know the code below is not correct, but it should illustrate what I’m trying to accomplish

/templates/mytemplate/fields/dimension.php:

<?php

defined('JPATH_BASE') or die;

jimport('joomla.form.formfield');

class JFormFieldDimension extends JFormField {

  protected $type = 'dimension';

  protected function getInput() {

  return  '<input id="'.$this->id.'_number" name="'.$this->name.'_number" type="number"/>'.

          '<select id="'.$this->id.'_unit" name="'.$this->name.'_unit">'.

              '<option value="px">px</option>'.

              '<option value="em">em</option>'.

              '<option value="rem">rem</option>'.

              '<option value="vh">vh</option>'.

              '<option value="vw">vw</option>'.

              '<option value="%">%</option>'.

          '</select>'.

          '<input id="'.$this->id.'" name="'.$this->name.'" value="'.$this->value.'" type="hidden">"';

  }

} ?>

I realize that I can just use a text field, but that won't prevent typos. Or I could use two separate fields (number and list fields) and combine the values later. But having this custom field would be more efficient. And the field could probably be extended to return CSS padding values like "10px 5px 15px 5px", something that would otherwise require up to eight Joomla form fields.

Looking for any pointers in the right direction.

[Viper]

So what exactly is the problem?

[Chris Bold]

The code above displays the input and select boxes in my template's backend. However any values that are entered are not saved. 

The problem is I don't know the correct syntax to concatenate the <input> and <select> values set by the user. Or how to retrieve that concatenated value.

My understanding is that I want $this->value to equal the concatenated result. My thinking was to send the concatenation to a third <input> as shown in the snippet above. I'm not sure if that is the correct approach.

[Roger Creagh]

Funnily enough I found myself trying to do exactly that last  week - and you are quite right a custom field for setting a value and unit for css dimensions would be very useful.

In the event I went for the simple option and simply had separate fields in the form view (with some use of divs and floats to display them next to each other rather than on separate lines with renderField() ) and sorted it out in the model/table code.

 

Thinking about it again I think I would try using javascript onchange() on the number and unit inputs to update the hidden field that returns the actual dimension  string that is used on the form view.

An alternative approach might be some javascript validation on a simple text field - but that sounds like a world of Regex pain to get working!

Obviously it would be neater to have a custom field that wouldn't require any code in the model/table/view so I await any other ideas with interest.

RogerCO

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/0dd5d62f-b1d5-4b3f-892a-f729001bda88n%40googlegroups.com.

[Chris Bold]

Roger, I also posted this at joomla.stackexchange.com, it looks like your instinct about using javascript is correct.

Unfortunately the responses there are beyond my skill & understanding.

I'm probably going to abandon the idea, and maybe hire someone to write this for me when/if I have the means to do so.