单击按钮并添加新的输入字段 Yii2

Question

我有疑问。每次我按下一个按钮，我都希望它再添加两个字段。但是由于我使用的是 yii2 框架，所以我很难实现 javascript 代码以及框架自动创建的表单代码。

我的表单由 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(); ?>

还有我要实现的 js 代码

<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

这是动态添加或删除字段的完美解决方案 perfect exmaple

yii2-dynamicform

单击按钮并添加新的输入字段 Yii2

Click on button and add new input fields Yii2

javascript

php

yii2