使用Codeigniter的动态输入字段 [英] Dynamic input fields using codeigniter

问题描述

我很难实现像这样的动态输入字段

i'm having a hard time implementing a dynamic input fields just like this sample to my codeigniter. I tried doing it but didn't worked. I was hoping anybody could help me with this one.

这是我的代码:

<?php $inputs = array(//        [0]title        [1]name             [2]type
        array('Account Title'   ,'account_title'    ,'text')
        ,array('Description'    ,'description'      ,'text')
        ,array('Debit'          ,'debit'            ,'number')
        ,array('Credit'         ,'credit'           ,'number')
    );?>

    <div class="col-md-12 no-padding">
        <?php foreach ($inputs as $i){?>
            <div class="form-group col-md-3 no-padding">
                <span class="input-group-addon input-head"><?php echo $i[0];?></span>
            </div>
        <?php }?>
    </div>

    <div class="col-md-12 no-padding">
    <?php foreach ($inputs as $i){?>
            <div class="form-group col-md-3 no-padding">
            <?php switch($i[1]){
                    case 'account_title':?>
                        <select name="<?php echo $i[1]?>">
                    <?php foreach($account_titles as $ac){?>
                                <option value="<?php echo $ac['id']?>"><?php echo $ac['account_title']?></option>
                    <?php }?>                                           
                        </select>
                    <?php break;
                    default:?>
                        <input  value="<?php echo set_value($i[1]); ?>"
                                class="form-control"
                                placeholder="<?php echo $i[0]; ?>"
                                name="<?php echo $i[1]; ?>"
                                type="<?php echo $i[2];?>"
                                <?php echo ($i[2]=='number')?'step="any" min="0"':''?>>
                    <?php break;
                }?>
                <?php echo form_error($i[1]) ? '<div class="text-danger">' . form_error($i[1]) . '</div>' : ''; ?>
            </div>
    <?php }?>
    </div>

当前看起来像这样:

我希望它看起来像这样，当单击添加按钮时，行输入字段和下拉列表将重复，并且在单击按钮删除时将删除它.就像上面的链接一样.

I want it to look like this, that when add button is click, the row input fields and drop down would duplicate, and it would delete when the button delete is click. Just like in the link above.

感谢您的帮助.

推荐答案

我为您的解决方案使用了不同的方法.

I have used the different approach for your solution.

我为您创建了小提琴，也许它可以为您提供帮助.

I have created the Fiddle for you may be it can help you.

在此处实时查看:
jsfiddle

See it live here:
jsfiddle

下面是代码:

HTML:

<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
    <input type="text" name="mytext[]" placeholder="Account Title">
    <input type="text" name="mytext2[]" placeholder="Description">
    <input type="text" name="mytext3[]" placeholder="Credit">
    <input type="text" name="mytext4[]" placeholder="Debit">
</div>
</div>

脚本:

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]" placeholder="Account Title"><input type="text" name="mytext2[]" placeholder="Description"><input type="text" name="mytext3[]" placeholder="Credit"><input type="text" name="mytext4[]" placeholder="Debit"><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

</script>

您只需要更改输入字段的名称.希望对您有所帮助.

You just have to change the name of the input field. I hope it helps.

这篇关于使用Codeigniter的动态输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！