Yii2: добавить новое текстовое поле при нажатии кнопки «Добавить»

Я хочу создать текстовые поля в своей форме, чтобы при нажатии кнопки 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(); ?>

что я должен добавить в код для достижения этой цели.
Любая помощь будет оценена по достоинству.

Спасибо.


javascript php jquery yii2
person Ankush Rishi    schedule 28.07.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я нашел решение следующим образом:
файл 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>
person Ankush Rishi    schedule 29.07.2015

arrow_upward
1
arrow_downward

Я не могу четко понять ваш вопрос, но если вы хотите добавить динамическую форму в свое приложение, попробуйте сначала посмотреть на это, если этот URL-адрес не может решить вашу проблему, вернитесь, и мы обсудим, как решить вашу проблему. . .

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

person ronydavid    schedule 28.07.2015