How to add fields to activeform with js/jQuery in Yii2?

Question

Hi I have a user form and I want to add a button so that the user can add more contacts dynamically.

<form id="user-form">
<div id='dynamicInput'>
    <div><input type='text' placeholder='name'></div>
    <div><input type='text' placeholder='email'></div>
</div>
<input type='button' id='btnadd' value="add contact">
<input type='submit'>
</form>

If I wasn't using the Framework I would do something like this http://jsfiddle.net/3t06fL3f/ (this is based on very old code) :)

But using Yii2 I'm not sure how to accomplish this, I'm new to yii2 and frameworks in general.

Thank you in advance. :)

Ali MasudianPour · Accepted Answer · 2014-12-17 18:12:05Z

3

You can do it like below:

Write the following code into your view:

 $this->registerJs('$("#btnadd").on("click",function(){'
    . '$("#dynamicInput").append(\''
    . Html::tag("div",  Html::textInput("name","",['placeholder'=>"name"]))
    . Html::tag("div",  Html::textInput("email","",['placeholder'=>"email"]))
    . '\');'
    . '})');

Please note that you need to have:

use yii\helpers\Html;

at top of your page. Otherwise, you should write yii\helpers\Html:: instead of Html::

answered Dec 17, 2014 at 18:12

Ali MasudianPour

14.5k3 gold badges64 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fernando Andrade Over a year ago

thanks that was almost what I wanted but I can handle the rest :) if you celebrate, Merry Christmas :)

MEM Over a year ago

How do you deal with model validation rules?

lubosdz Over a year ago

Example above just injects pure HTML element inside of ActiveForm. However, Active form has also handles validation rules and error messages. How to add those - means how to add dynamically field into ActiveForm so validation rules would apply?

Collectives™ on Stack Overflow

How to add fields to activeform with js/jQuery in Yii2?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related