Question

我想在我的表单中创建文本字段，这样当我点击Add New Field按钮时，它应该打开一个新的下一个字段。这是我的表格代码：

    <?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(); ?>

我应该在代码中添加什么才能实现这一目标任何帮助，将不胜感激。

感谢。

Answer 1

我发现解决方案如下：
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;
});
});

查看

<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>

Answer 2

我无法清楚地理解你的问题，但如果你想在你的应用程序中添加dinamic表单，请先试一下，如果这个url无法解决你的问题，请回来讨论如何解决你的问题。。

https://www.youtube.com/watch?v=qqFpTBr323Y

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

2 个答案: