0

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.

Improve this question

1 Answer 1

Reset to default
0

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'] ?? '') . '">
Improve this answer
2
  • I removed the hidden <input> and replaced the first <input> with your code With this change, the only value saved is from the <select>. That is, if I enter 22 and select rem, the output is rem and not 22rem as I hoped. Which is still better progress than I've managed so far. Unfortunately neither value is reflected in the fields when I click save. I enter 22 and select rem and then click save, the <input> is empty again and the <select> displays "px" (the first option in the list)
    – Bold
    Aug 29, 2021 at 21:07
  • Without some javascript to merge the two values into a single string BEFORE form submission, you will need to collect these array elements with php AFTER form submission and manually merge the values as you desire. What kinds of text are potential $this->name values? @Bold You repeated Sharky's advice from the <select> tag as well, right? For your information, it is never necessary to declare the value attribute of an <option> tag if it is identical to its text.
    – mickmackusa
    Aug 29, 2021 at 21:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.