insert.php

<!-- Dashboard Wrapper Start -->
<div class="dashboard-wrapper">
    <!-- Left Sidebar Start -->
          <div class="center-sidebar">
      <!-- Row Start -->
            <div class="row">
              <div class="col-lg-12 col-md-12">
                <div class="widget">
                  <div class="widget-header">
                    <div class="title">
                      <a id="inputs">Tambah Resep</a>
                    </div>
                    <span class="tools">
                      <i class="fa fa-plus"></i>
                    </span>
                  </div>
                  <div class="widget-body">

                      <?php echo form_open("resep/create_data",
                            "class='form-horizontal' row-border")?>

                      <div class="form-group">
                        <label class="col-md-2 control-label">Nama Item</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-xs-4">
                                <select id="active" class="form-control" name="id_item" required >
                                <option value="">
                                  - Nama Item -
                                </option>
                                <?php
                                  foreach ($itemx as $pin) {
                                      echo "<option value='$pin->id_item'>
                                    $pin->nama_item</option>";
                                  }
                                ?>
                              </select>
                                </div>
                            </div>
                        </div>
                       </div>
           <div class="form-group">
                        <label class="col-md-2 control-label">Bahan-bahan</label>
                        <div class="col-md-6">
                          <div class="row">
                          <div class="col-md-4 col-sm-4 col-xs-4">
                            <?php
                              global $max;
                              $max=$count;
                              $i=0;
                              foreach ($bahanx as $pin2){
                                ?>
                                    <script type="text/javascript">
                                      document.write("<div class='input-group' style='width:175%'><label class='input-group-addon' style='width:100px'><input type='checkbox' name='bahan' aria-label='Checkbox for following text input' value='<?php echo $pin2->id_barang ?>' oninput='changeText(this,<?php echo $i ?>);'> <?php echo $pin2->nama_barang;?></label><input type='text' class='form-control' aria-label='Text input with checkbox' name='banyak_bahan' value='0' disabled/></div><br/>");
                                    </script>
                                <?php
                                $i++;
                              }
                            ?>
                        </div>
                        </div>
                       </div>
             </div>
             <button type="button" onclick="btnHasil()">Hasil</button>
             <div id='fff'></div>
             <?php /*<input type="hidden" name="bahan" value="<?php ?>" placeholder="bahan">
             <input type="hidden" name="banyak_bahan" value="null" placeholder="banyak_bahan">*/?>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" class="btn btn-info" >Simpan</button>
                          <button type="reset" class="btn btn-danger" title="Mengembalikan Data">Reset</button>
                          <?php echo anchor('/resep/data',
                                    '<button type="button" class="btn btn-success
                                        " data-toggle="tooltip" data-placement="top" title="Kembali Data resep">
                                            Kembali</button>'); ?>
                        </div>
                      </div>
                    <?php form_close()?>
                  </div>
                </div>
              </div>
            </div>
            <!-- Row End -->
     </div>
</div>
<script type="text/javascript" >
  var item_box = document.getElementsByName('banyak_bahan');
  var item_name = document.getElementsByName('bahan');
  var tot; var x=0,y=0;
  var max=<?php echo $max ?>;
  function changeText(e,i){
    //item_name[i].value = e.checked ? 1 : 0;
    item_box[i].disabled = !e.checked;
    if(item_box[i].disabled==true){
      item_box[i].value=0;
    }else {
      item_box[i].value=1;
    }
  }

  function btnHasil(){
    document.getElementById('fff').innerHTML="";
    var a=0;
    for(a;a<max;a++){
      if(a==0){
        if(item_box[a].value!=0 && item_name[a].disabled==false){
          x=item_box[a].value;
          y=item_name[a].value;
        }else{
          x="";
          y="";
        }
      } else if(item_box[a].value>0 && item_name[a].disabled==false) {
        if(item_box[a].value!=0){
          if(x==""){
            x=item_box[a].value;
            y=item_name[a].value;
          } else {
            x=x+","+item_box[a].value;
            y=y+","+item_name[a].value;
          }
        }else{
          x=x;
          y=y;
        }
      } else {}

      document.getElementById('fff').innerHTML="<br/>"+y+"<br/>"+x+"<br/>";
    }
    var val = item_box[item_box.length - 1];
    item_box[val].value=x;
    item_name[vale].value=y;
    //document.getElementById('fff').innerHTML=x+"<br/>"+y;
  }
</script>