Howto create Select with Brick

Kirby 2 Solved ✅
1

Hello,

i can’t get a select box in a field working.

$wrapper = parent::input();
      $select = new Brick('select');
      $select->addClass('selectbox');
      $select->attr(array(
        'name'         => 'myselect',
        'id'           => 'myselect',
        'required'     => 'false',
        'autocomplete' => 'false',
        'autofocus'    => 'false',
        'readonly'     => 'false',
        'disabled'     => 'false',
      ));
        
    $select = $select->append($this->option('', '', $this->value() == ''));
    $select = $select->append($this->option("val1", "txt1", $this->value() == "val1"));
    $select = $select->append($this->option("val2", "txt2", $this->value() == "val2"));

    $inner = new Brick('div');
    $inner->addClass('selectbox-wrapper');
    $inner->append($select);

    $wrapper = new Brick('div');
    $wrapper->addClass('input input-with-selectbox');
    $wrapper->append($inner);

    return $wrapper;

the select dies not have any options. why not?

S.

2

Which field are you extending?

Could you please post the complete field?

3

I extend the normal input field.

class AuditField extends InputField {

  static public $fieldname = 'audit';
  static public $assets = array(
    'css' => array(
      'style.css',
    )
  );

but it doesn’t matter. i want to add own fields like a select box or checkboxes to my field. the values are not saved to blueprint. they will be processed by a page.update.hook.

4

I’m not so sure that it doesn’t matter and I’m afraid I can’t help you without any context.

You are telling me that the options don’t show up. Where are the options defined in your field?

5

They are fixed values added by this code:

$select = $select->append($this->option('', '', $this->value() == ''));
$select = $select->append($this->option("val1", "txt1", $this->value() == "val1"));
$select = $select->append($this->option("val2", "txt2", $this->value() == "val2"));

but they want show up.

6

Well, yes, I have seen that but that is not the problem, you are using the option property, but where is it defined? That’s why I was asking for the complete field.

7

It’s not defined… this seems the problem. How i add fixed values without the option property?

8

Have a look at the select field… Without the function that defines the property, you have to add the brick manually.

9

Ok, now i understand.

Thats what i want. How to add a option manually)

10

The Brick class renders pure html in the end. So you need to add proper <option> tags to the select field.

$select->append('<option value="val1" seleced>text1</option>');

// or use the html helper
$select->append(html::tag('option', 'text1', [
  'value' => 'val1',
  'selected' => true,
]));

// or use the brick class
$option = new Brick('option');
$option->attr('value', 'val1');
$option->attr('selected', true);
$option->html('text1');

$select->append($option);
2 Likes
11

Or add the option method:

  public function option($value, $text, $selected = false) {
    return new Brick('option', $this->i18n($text), array(
      'value'    => $value,
      'selected' => $selected
    ));
  }

and leave your code as is above.

3 Likes
12

@Svnt This would have been a lot less time consuming to solve if you had just posted your code as I asked you to do instead of leaving it all to guesswork.

It is important what field you extend, because these fields inherit from each other. So knowing what fields you extend, we know what we can expect from a field definition.

13

Ok, sorry.

It works now:

$select = new Brick('select');
$select->addClass('selectbox');
$select->attr(array(
  'name'         => 'auditselect',
  'id'           => 'auditselect',
));

$option = new Brick('option');
$option->attr('', '');
$option->attr('selected', false);
$option->html('');
$select->append($option);

$option = new Brick('option');
$option->attr('value', 'val1');
$option->attr('selected', false);
$option->html('text1');
$select->append($option);

$option = new Brick('option');
$option->attr('value', 'val2');
$option->attr('selected', false);
$option->html('text2');
$select->append($option);

$inner = new Brick('div');
$inner->addClass('selectbox-wrapper');
$inner->append($select);

$iconwrap = new Brick('div');
$iconwrap->addClass('field-icon');
$icon = new Brick('i');
$icon->addClass('icon fa fa-chevron-down');
$iconwrap->append($icon);
$inner->append($iconwrap);

$wrapper = new Brick('div');
$wrapper->addClass('input input-with-selectbox');
$wrapper->append($inner);
14

That’s a lot of repetitive code you could avoid with using the option method. Keep it DRY.

1 Like
15

Adding multiple fields to one field was a bad idea at all.
Now i use a separate custom field for all my inputs and group them together with the ‘Global Field Definitions’.

Works great now!

sorry for the stupid questions,
Svnt