Динамические поля ввода с использованием codeigniter

Question

Мне трудно внедрять динамические поля ввода так же, как это sample, на мой код. Я пытался это сделать, но не работал. Я надеялся, что кто-нибудь сможет мне помочь с этим.

Это мой код:

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

В настоящее время он выглядит следующим образом:

Я хочу, чтобы выглядеть следующим образом, что при нажатии кнопки добавить, это нажать, полей ввода строки и drop down будет дублироваться, и он будет удаляться при нажатии кнопки delete. Как и в ссылке выше.

Любая помощь приветствуется.

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> 

Вам просто нужно изменить имя поля ввода. Я надеюсь, что это помогает.