Append Html In Textinput Tform

Yii 2.0 General Discussions
1

How can I append html in textinput?

<?= $form->field($model, ‘amount’)->textInput([ ‘maxlength’ => 19]) ?>

I would like the folowing result:

<div class="input-group">

<span class="input-group-addon">$</span>

<input type="text" class="form-control">

<span class="input-group-addon">.00</span>

</div>

http://getbootstrap.com/components/#input-groups

Thanks!!

2

You can use my extension yii2-widgets and refer the input group addons section which simplifies this for ActiveForm and ActiveField for all bootstrap form orientations (horizontal, vertical, or inline). If you are using the extension, its as simple as typing :[s]




    use kartik\widgets\ActiveForm;


    echo $form->field($model, 'amount_paid', [

        'addon' => ['type' => 'append', 'content'=>'.00']

    ]);

[/s]

Alternatively, if you do not want to use the extension, you can pass the template property to style as per your required input-group. You will need to then do this for every text input field where you need this.

[size="4"]NOTE: This extension has been upgraded and the new syntax for addons is mentioned here[/size]

3

Thanks! I am using your widgets so it would be easy to change this code. Change the template is another option but for now I prefer to use your widget.

A good improvement can be add the append and prepend in the same field like the example of bootstrap ;)

4

Thanks for the suggestion. Will record an issue (maybe you can as well), I will update this in my extension as an enhancement.

5

This is resolved in the yii2-widgets extension now. You can use both prepend and append addons like the following:




echo $form->field($model, 'amount_paid', [

   'addon' => [

      'prepend' => ['content'=>'<button class="btn btn-primary">Ok</button>', 'asButton' => true],

      'append' => ['content' => '.00']

   ]

]);

The demo site will be updated with the changes later.

6

Great update!

Thanks!

7

Demo is updated with the various input group addon examples. Your prepend and append case can be found here.