Question

我很难将sample这样的动态输入字段实现到我的codeigniter。我试过这样做但没有奏效。我希望有人可以帮我这个。

这是我的代码：

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

目前看起来像这样：

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

感谢任何帮助。

Answer 1

我使用了不同的解决方案。

我为你创造了小提琴可能对你有帮助。

在这里看到它：
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>

您只需更改输入字段的名称即可。我希望它有所帮助。

使用codeigniter的动态输入字段

1 个答案: