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

Question

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 two separate fields (text 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 eight Joomla form fields .

Looking for any pointers in the right direction.

Answer 1

The use of hidden input requires some JavaScript to populate the field when values are chosen in other fields. A simpler solution would be to use array notation for field names instead:

<input name="' . $this->name . '[number]" type="number" value="' . htmlspecialchars($this->value['number'] ?? '') . '">