Javascript Yii2：单击“添加”按钮添加新文本字段

我想在我的表单中创建文本字段，这样当我点击

添加新字段

按钮时，它就会打开一个新的下一个字段。 这是我的表单代码：

    <?php $form = ActiveForm::begin(); ?>

        <?= $form->field($model, 'status_type')->textInput(['maxlength' => 
true]) ?>

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

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

我应该在代码中添加什么来实现这一点。
任何帮助都将不胜感激

---

谢谢。

我无法清楚地理解您的问题，但如果您想在应用程序中添加dinamic表单，请先尝试查看此内容，如果此url无法解决您的问题，请回来，我们将讨论如何解决您的问题

---

我无法清楚地理解您的问题，但如果您想在应用程序中添加dinamic表单，请先尝试查看此内容，如果此url无法解决您的问题，请回来，我们将讨论如何解决您的问题

---

我发现解决方案如下：
Js文件

jQuery(document).ready(function($){
    $('.my-form .add-items').click(function(){
        var n = $('.text-items').length + 1;
        var box_html = $('<p class="text-items"><label for="item' + n + '">Item <span class="items-number">' + n + '</span></label> <input type="text" class="form-control" name="items[]" value="" id="item' + n + '" /> <a href="#" class="remove-items">Remove</a></p>');
        box_html.hide();
        $('.my-form p.text-items:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });

    $('.my-form').on('click', '.remove-items', function(){
    //$(this).parent().css( 'background-color', '#FF6C6C' );
    if($('.text-items').length > 1){
        $(this).parent().fadeOut('slow', function() {
            $(this).remove();
            $('.items-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
    }
    return false;
});
});

jQuery（文档）.ready（函数（$）{
$（'.my form.add items'）。单击（函数（）{
var n=$（'.text items'）。长度+1；
var box_html=$（“
项“+n+”
”）；
box_html.hide（）；
$（'.my-form p.text-items:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove items'，函数（）上{
//$（this.parent（）.css（'background color'，'#FF6C6C'）；
如果（$（'.text items'）。长度>1）{
$（this.parent（）.fadeOut（'slow'，function（））{
$（this.remove（）；
$（'.items number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
}
返回false；
});
});

查看

<div class="my-form">

    <?php
    if( !$model->isNewRecord){
        $items = StatusType::find()->where(['status_id'=>$model->id])->orderBy('order')->all();
        if(!empty($items)){
        foreach ($items as $item) {
    ?>

        <p class="text-items">
            <label for="item<?= $item->order ?>">Item <span class="items-number"><?= $item->order ?></span></label>
            <input class="form-control" type="text" name="items[]" value="<?= $item->title ?>" id="item<?= $item->order ?>" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>
     <?php }}else{
     ?>
        <p class="text-items">
            <label for="item">Item <span class="items-number">1</span></label>
            <input class="form-control" type="text" name="items[]" value="" id="item" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>

     <?php  
        } } else{?>
        <p class="text-items">
            <label for="item">Item <span class="items-number">1</span></label>
            <input class="form-control" type="text" name="items[]" value="" id="item" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>
     <?php }?>
    <?= Html::button('Add More', ['class'=>'glyphicon glyphicon-plus btn btn-default btn-sm add-items']) ?>
</div>

我发现解决方案如下：

Js文件

jQuery(document).ready(function($){
    $('.my-form .add-items').click(function(){
        var n = $('.text-items').length + 1;
        var box_html = $('<p class="text-items"><label for="item' + n + '">Item <span class="items-number">' + n + '</span></label> <input type="text" class="form-control" name="items[]" value="" id="item' + n + '" /> <a href="#" class="remove-items">Remove</a></p>');
        box_html.hide();
        $('.my-form p.text-items:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });

    $('.my-form').on('click', '.remove-items', function(){
    //$(this).parent().css( 'background-color', '#FF6C6C' );
    if($('.text-items').length > 1){
        $(this).parent().fadeOut('slow', function() {
            $(this).remove();
            $('.items-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
    }
    return false;
});
});

jQuery（文档）.ready（函数（$）{
$（'.my form.add items'）。单击（函数（）{
var n=$（'.text items'）。长度+1；
var box_html=$（“
项“+n+”
”）；
box_html.hide（）；
$（'.my-form p.text-items:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove items'，函数（）上{
//$（this.parent（）.css（'background color'，'#FF6C6C'）；
如果（$（'.text items'）。长度>1）{
$（this.parent（）.fadeOut（'slow'，function（））{
$（this.remove（）；
$（'.items number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
}
返回false；
});
});

查看

<div class="my-form">

    <?php
    if( !$model->isNewRecord){
        $items = StatusType::find()->where(['status_id'=>$model->id])->orderBy('order')->all();
        if(!empty($items)){
        foreach ($items as $item) {
    ?>

        <p class="text-items">
            <label for="item<?= $item->order ?>">Item <span class="items-number"><?= $item->order ?></span></label>
            <input class="form-control" type="text" name="items[]" value="<?= $item->title ?>" id="item<?= $item->order ?>" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>
     <?php }}else{
     ?>
        <p class="text-items">
            <label for="item">Item <span class="items-number">1</span></label>
            <input class="form-control" type="text" name="items[]" value="" id="item" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>

     <?php  
        } } else{?>
        <p class="text-items">
            <label for="item">Item <span class="items-number">1</span></label>
            <input class="form-control" type="text" name="items[]" value="" id="item" /><br>
            <a href="#" class="remove-items">Remove</a>
        </p>
     <?php }?>
    <?= Html::button('Add More', ['class'=>'glyphicon glyphicon-plus btn btn-default btn-sm add-items']) ?>
</div>