Dynamic Text Input

I’m using Karthik Form Builder - http://demos.krajee.com/builder-details/form-grid

and I need to add a button that it would add new text input and dropdown, just like this image:


The item type is a list that I will get from my model but I’m not sure how to do the add button to add unlimited field and than when I click in submit my form it would submit everything on my form + the correct amount of quantities.


I have developed one demo form for you check it out.

if u need to use this kindly keep css nd js in web folder.

@ _form.php


use yii\helpers\Html;

use kartik\widgets\ActiveForm;

use yii\helpers\ArrayHelper;

use yii\helpers\Url;

use kartik\widgets\Select2;

use kartik\widgets\DepDrop;  

use common\models\Country;

use common\models\State;

/* @var $this yii\web\View */

/* @var $model common\models\City */

/* @var $form yii\widgets\ActiveForm */


  <script src="//code.jquery.com/jquery-latest.js" type="text/javascript"></script>


    <!-- The following styles are scripts are for styling this page and are not required to make this script function -->

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <style type="text/css">


    .container {

        max-width: 800px;


    .syntaxhighlighter.demo_code {

        max-width: 1100px;

        margin-left: auto !important;

        margin-right: auto !important;


    .demo_code .container:before, .demo_code .container:after {

        content: none;


    .demo_code .container {

        max-width: 1100px;




    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>

    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>

    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>

    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>

    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>

    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />

    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />


<div class="city-form">

<div id="wrap">

        <div class="container">

        <div class="page-header"><h1 style="text-align: center">Dynamic Text boxes with jQuery and PHP</h1></div>

        <p class="lead"><a href="/dynamic-textbox-jquery-php/">&laquo; Back to Article</a></p>


          <?php $form = ActiveForm::begin(['id' => 'form-signup',


                                            'type' => ActiveForm::TYPE_HORIZONTAL,

                                            'formConfig' => ['showErrors' => true],

                                            'options' => ['enctype' => 'multipart/form-data']



                  <div class="form-group  ">

                    <label class="col-sm-2 control-label" for="txtbox1">Box <span class="label-numbers">1</span></label>

                    <div class="col-sm-10">

                        <input class="form-control" type="text" name="boxes[]" id="txtbox1" />

                        <a href="#" class="btn btn-success btn-xs add-txt">Add More</a>




      <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>


              <?php ActiveForm::end(); ?>





     <script type="text/javascript">



            $("body").css('min-height', $(window).height() + 1 );


                $("body").css('min-height', $(window).height() + 1 );



                $(".syntaxhighlighter.demo_code").toggleClass( "collapsed", 500, function(){

                    $("#toggle_code").text( ( $("#toggle_code").text() == 'View Code' ) ? 'Hide Code' : 'View Code' );

                    $("#toggle_code").toggleClass( "btn-success btn-danger" );




            //Add More

            $(".form-horizontal .add-txt").click(function(){

                var no = $(".form-group").length + 1;

                if( 5 < no ) {

                    alert('Stop it!');

                    return false;


                var more_textbox = $('<div class="form-group">' +

                '<label class="col-sm-2 control-label" for="txtbox' + no + '">Box <span class="label-numbers">' + no + '</span></label>' +

                '<div class="col-sm-10"><input class="form-control" type="text" name="boxes[]" id="txtbox' + no + '" />' +

                '<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' +





                return false;




            $('.form-horizontal').on('click', '.remove-txt', function(){

                $(this).parent().parent().css( 'background-color', '#FF6C6C' );

                $(this).parent().parent().fadeOut("slow", function() {

                    $(this).parent().parent().css( 'background-color', '#FFFFFF' );


                    $('.label-numbers').each(function( index ){

                        $(this).text( index + 1 );



                return false;






          if($_POST) {

          print_r($_POST);exit;//u will get post data here.

          /* Code for save in model in loop.*/

              return $this->render('dyntext', [

                  'model' => $model,


          } else


              return $this->render('dyntext', [

                  'model' => $model,



Thank you so much, with some changes it worked for me but now do you know how can I add a dropdown in the add more? The dropdown needs to load from my model array.