Click on button and add new input fields Yii2

Question

I have a doubt. Every time I press a button, I want it to add two more fields. But since I'm working with the yii2 framework I have difficulty implementing the javascript code along with the code of forms that the framework automatically creates.

My form created by gii

<div class="hotel-form">


<?php $form = ActiveForm::begin(); ?>
<center>
    <?= $form->field($model, 'nome')->textInput(['maxlength' => true, 'style'=>'width:500px', 'placeholder' => "Nome do hotel"])->label(false); ?>
    <!--
    <?= $form->field($model, 'userId')->textInput(['maxlength' => true,'style'=>'width:500px',  'placeholder' => "Proprietário"])->label(false); ?>
    -->
    <?= $form->field($model, 'descricao')->textarea(['maxlength' => true, 'style'=>'width:500px; resize: none;', 'rows' => 6, 'placeholder' => "Descrição"])->label(false); ?>

    <?= $form->field($model, 'contacto')->textInput([ 'maxlength' => 9, 'style'=>'width:500px','placeholder' => "Contacto"])->label(false); ?>

    <?= $form->field($model, 'website')->textInput(['maxlength' => true, 'style'=>'width:500px', 'placeholder' => "Website"])->label(false); ?>

    <?= $form->field($model, 'cp4')->textInput(['maxlength' => 4, 'style'=>'width:500px','placeholder' => "Código-postal (4 dígitos) "])->label(false); ?>

    <?= $form->field($model, 'cp3')->textInput(['maxlength' => 3, 'style'=>'width:500px', 'placeholder' => "Código-postal (3 dígitos)"])->label(false); ?>

    <?= $form->field($model, 'regiaoId')->dropDownList(ArrayHelper::map(RegiaoHotel::find()->orderBy(['nome' => SORT_ASC])->all(), 'id', 'nome'), ['style'=>'width:500px']) ?>

    <?= $form->field($model, 'morada')->textInput(['maxlength' => true, 'style'=>'width:500px', 'placeholder' => "Morada"])->label(false); ?>

    <?= $form->field($model, 'estado')->hiddenInput(['value'=> 2])->label(false);?>

    <?= $form->field($model, 'img')->fileInput() ?>


    //There are the fields i want do add each time i click button
    <?= $form->field($comHotel, 'descricao')->textInput(['maxlength' => true, 'style'=>'width:500px', 'placeholder' => "Descricao comodidade"])->label(false);?>
    <?= $form->field($comHotel, 'preco')->textInput(['maxlength' => true, 'style'=>'width:500px', 'placeholder' => "Preço da comodidade"])->label(false);?>
    //

    <br>

    <div class="form-group">
        <?= Html::submitButton('Registar', ['class' => 'btn btn-success']) ?>
    </div>


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

And there i have the js code that im trying to implement

<script>
var count = 1; // There are 4 questions already

function addQuestion()
{
    // Get the quiz form element
    var quiz = document.getElementById('quiz');

    // Good to do error checking, make sure we managed to get something
    if (quiz)
    {
        if (count)
        {
            // Create a new <p> element
            var newP = document.createElement('p');
            newP.innerHTML = 'Question ' + (count + 1);

            // Create the new text box
            var newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.name = 'descricao';
            var newInput1 = document.createElement('input');
            newInput1.type = 'number';
            newInput1.name = 'preco';

            // Good practice to do error checking
            if (newInput && newInput1 && newP)
            {
                // Add the new elements to the form
                quiz.appendChild(newP);
                quiz.appendChild(newInput);
                quiz.appendChild(newInput1);
                // Increment the count
                count++;
            }

        }
        else
        {
            alert('Question limit reached');
        }
    }
}

<form id="quiz" action="" method="POST">
   <input type="button" value="Add question" onclick="javascript: 
   addQuestion();"/>

   <p>Question 1</p>
   <input type="text" name="descricao"/>
   <input type="text" name="preco"/>
   <p></p>
</form>

Answer 1

here is your perfect solution for dynamically add or remove fields with perfect exmaple

yii2-dynamicform