2016-05-31 2 views
0

このような動的入力フィールドを実装するのは苦労しています。sampleをcodeigniterに置き換えてください。私はそれをやってみたが、うまくいった。私は誰もがこれで私を助けることができたと思っていた。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> 

現在、それは次のようになります。

enter image description here

私はそれが次のようになりたい、追加ボタンは、クリックした行の入力フィールドであるときということドロップダウンが重複し、ボタンの削除がクリックであると削除されます。上記のリンクのように。

enter image description here

すべてのヘルプは高く評価されます。

+1

'$ account_titles'はどこですか? –

+0

参照するサンプルはjQueryに大きく依存しますが、jQueryコードは表示されません。また、 "うまくいかなかった"というのは簡単なエラーの説明です。何かエラーがありますか? – jtheman

答えて

0

私はあなたのソリューションに異なるアプローチを使用しました。

私はフィドルを作成しました。それはあなたを助けることができるかもしれません。

それはここに住んで参照してください:ここ
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> 

入力フィールドの名前を変更するだけです。私はそれが助けて欲しい

関連する問題