YVS1102 YVS1102 - 24 days ago 7
HTML Question

Show multiple row in dynamic input field

I'm trying to create an edit form which is dynamic. The user can add more rows or delete rows.

There is no problem in my php. The problem is in My Jquery.

Here is My HTML

<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
echo form_open_multipart($controller.'/save',$attributes);
?>

<div class="form-group">
<label class="col-sm-3 control-label">Attendance Date </label>
<div class="col-sm-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="datetimepicker_mask" type="text" value="<?=inggris_date($master->startdate)?>" readonly name="attendance_date" class="form-control"/>
</div>
</div>
</div>


<div class="form-group">
<label class="col-sm-3 control-label">Keterangan</label>
<div class="col-sm-5">
<textarea class="form-control" required name="keterangan"><?=$master->keterangan;?></textarea>
</div>
</div>

<table width="100%" id="example1" class="table table-bordered table-striped">
<tr> <td>
No.
</td>
<td> Nama Lengkap </td>

</tr>

<?php
$x = 0;
foreach($detail as $det) {
$x++;
?>
<tr id = 'ke<?=$x;?>'>
<td> <?=$x;?> </td>
<td>
<select name="nip[]" class="form-control select2">
<option> -- </option>
<?php foreach($emp as $orang){ ?>
<option <?php if($det->nip == $orang->Nip) echo "selected"; ?> value="<?=$orang->Nip;?>"> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option>
<?php } ?>
</select>
</td>
</tr>
<?php } ?>


</table>
<div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>&nbsp;&nbsp;&nbsp;<a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a></div>
<br>
<br>

<div class="box-footer">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-info pull-right">Save</button>
</div><!-- /.box-footer -->
</form>


and here is my Jquery

<?php $totaldata = count($detail); echo "Total data = ".$totaldata; ?>
<script type="text/javascript">
$(document).ready(function(){

var i=<?=$totaldata;?>;
$("#add_row").click(function(){
$('#ke'+i).html("<td>"+ (i+1) +"</td><td><select name='nip[]' class='form-control'>"+
"<option> -- </option>"+
<?php foreach($emp as $orang){ ?>
"<option value='<?=$orang->Nip;?>'> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option>"+
<?php } ?>
"</select> </td>");
$('#example1').append('<tr id="ke'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#ke"+(i-1)).html('');
i--;
}
});


});
</script>


So, Here is my problem from the first time the page load. The view is like this

enter image description here

And then here is what happen when i click
Tambah Baris Baru


enter image description here

The second rows is gone. And the numbering is wrong.

And this what happen when i click
Hapus Baris


enter image description here

it's work as expected. But the numbering is wrong.

So, how can i fix it ? sorry for my bad english. Thanks.

JsFiddle https://jsfiddle.net/0z2fcg39/

Answer

The problem is the value of i as you suspected. During the first execution value of i is 2, which is already having the 2nd row, it it overrides it with the newly added one(slno 3).

$(document).ready(function() {

  var i = 2;
  $("#add_row").click(function() {
    i++;
    var $tr = $('<tr id="ke' + i + '"></tr>').appendTo('#example1');

    $tr.html("<td>" + (i) + "</td><td><select name='nip[]' class='form-control'>" +
      "<option> -- </option>" +
      "<option value='0600260'> [0600260] - [ZAENAL ABIDIN] </option>" +
      "<option value='0802781'> [0802781] - [SATIBI ] </option>" +
      "<option value='0903380'> [0903380] - [JUDY SJARIP] </option>" +
      "<option value='1105605'> [1105605] - [YULIANTI HENDARSIH] </option>" +
      "<option value='1106975'> [1106975] - [ABDUL ROCHIM] </option>" +
      "<option value='120442130008'> [120442130008] - [CHOIRUL ILYAS] </option>" +
      "<option value='1207246'> [1207246] - [ACHMAD MAULANA] </option>" +
      "<option value='123456'> [123456] - [Test] </option>" +
      "<option value='1309713'> [1309713] - [LITICIA SOCA LAWRENDRA ] </option>" +
      "<option value='1411097'> [1411097] - [RAMDAN NUR] </option>" +
      "<option value='1411517'> [1411517] - [JULIMAN YASONASA GEA ] </option>" +
      "<option value='1411795'> [1411795] - [NOVIANTO CHRIS HENDARWAN] </option>" +
      "<option value='1412021'> [1412021] - [WALUYO SUPRIADI] </option>" +
      "<option value='1412717'> [1412717] - [ADDINUL FAUZAN ] </option>" +
      "<option value='1412774'> [1412774] - [ABDUL FATAH] </option>" +
      "<option value='1500575'> [1500575] - [BAGUS SUSETYO] </option>" +
      "<option value='1500701'> [1500701] - [AHMAT SUPARDI] </option>" +
      "<option value='1501815'> [1501815] - [KHAIRUNNAS ] </option>" +
      "<option value='1501971'> [1501971] - [SHELLY DINI DEBYANZAH] </option>" +
      "<option value='1502017'> [1502017] - [CHOIRUL ILYAS] </option>" +
      "<option value='1602762'> [1602762] - [BOBY KURNIAWAN] </option>" +
      "<option value='1603240'> [1603240] - [TOTO MARYOTO] </option>" +
      "</select> </td>");
  });

  $("#delete_row").click(function() {
    if (i > 1) {
      $("#ke" + i).remove();
      i--;
    }
  });


});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://localhost:84/payroll2/dinas_ho_other/save" method="post" accept-charset="utf-8" class="form-horizontal" id="" enctype="multipart/form-data">
  <div class="form-group">
    <label class="col-sm-3 control-label">Attendance Date</label>
    <div class="col-sm-7">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-calendar"></i>
        </div>
        <input id="datetimepicker_mask" type="text" value="2016-11-08" readonly name="attendance_date" class="form-control" />
      </div>
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-3 control-label">Keterangan</label>
    <div class="col-sm-5">
      <textarea class="form-control" required name="keterangan">TEST 2</textarea>
    </div>
  </div>

  <table width="100%" id="example1" class="table table-bordered table-striped">
    <tr>
      <td>
        No.
      </td>
      <td>Nama Lengkap</td>

    </tr>


    <tr id='ke1'>
      <td>1</td>
      <td>
        <select name="nip[]" class="form-control select2">
          <option>--</option>
          <option value="0600260">[0600260] - [ZAENAL ABIDIN]</option>
          <option value="0802781">[0802781] - [SATIBI ]</option>
          <option value="0903380">[0903380] - [JUDY SJARIP]</option>
          <option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option>
          <option value="1106975">[1106975] - [ABDUL ROCHIM]</option>
          <option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option>
          <option value="1207246">[1207246] - [ACHMAD MAULANA]</option>
          <option value="123456">[123456] - [Test]</option>
          <option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option>
          <option value="1411097">[1411097] - [RAMDAN NUR]</option>
          <option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option>
          <option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option>
          <option value="1412021">[1412021] - [WALUYO SUPRIADI]</option>
          <option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option>
          <option value="1412774">[1412774] - [ABDUL FATAH]</option>
          <option value="1500575">[1500575] - [BAGUS SUSETYO]</option>
          <option value="1500701">[1500701] - [AHMAT SUPARDI]</option>
          <option value="1501815">[1501815] - [KHAIRUNNAS ]</option>
          <option selected value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option>
          <option value="1502017">[1502017] - [CHOIRUL ILYAS]</option>
          <option value="1602762">[1602762] - [BOBY KURNIAWAN]</option>
          <option value="1603240">[1603240] - [TOTO MARYOTO]</option>
        </select>
      </td>
    </tr>

    <tr id='ke2'>
      <td>2</td>
      <td>
        <select name="nip[]" class="form-control select2">
          <option>--</option>
          <option value="0600260">[0600260] - [ZAENAL ABIDIN]</option>
          <option value="0802781">[0802781] - [SATIBI ]</option>
          <option value="0903380">[0903380] - [JUDY SJARIP]</option>
          <option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option>
          <option value="1106975">[1106975] - [ABDUL ROCHIM]</option>
          <option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option>
          <option value="1207246">[1207246] - [ACHMAD MAULANA]</option>
          <option value="123456">[123456] - [Test]</option>
          <option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option>
          <option value="1411097">[1411097] - [RAMDAN NUR]</option>
          <option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option>
          <option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option>
          <option value="1412021">[1412021] - [WALUYO SUPRIADI]</option>
          <option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option>
          <option selected value="1412774">[1412774] - [ABDUL FATAH]</option>
          <option value="1500575">[1500575] - [BAGUS SUSETYO]</option>
          <option value="1500701">[1500701] - [AHMAT SUPARDI]</option>
          <option value="1501815">[1501815] - [KHAIRUNNAS ]</option>
          <option value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option>
          <option value="1502017">[1502017] - [CHOIRUL ILYAS]</option>
          <option value="1602762">[1602762] - [BOBY KURNIAWAN]</option>
          <option value="1603240">[1603240] - [TOTO MARYOTO]</option>
        </select>
      </td>
    </tr>


  </table>
  <div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>&nbsp;&nbsp;&nbsp;<a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a>
  </div>
  <br>
  <br>

  <div class="box-footer">
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-info pull-right">Save</button>
  </div>
  <!-- /.box-footer -->
</form>

Comments