wawan Setiyawan wawan Setiyawan - 2 months ago 21
Javascript Question

clone and selectbox onchange change value of input text

i have problem with clone and change.



$(document).ready(function() {
addBarang();
});

function addBarang() {
var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
$(".target_clone:last").append(new_barang);
// $(".barang_in_clone:has(select)").addClass("select2");
}

$('body').on('click', '.btn_kurangi_barang', function() {
$(this).closest('.barang_in_clone').remove();
});

function showModel(id){
if(id === ''){
$("input[name=show]").val("");
}else if(id === "1"){
$("input[name=show]").val("foo");
}else if(id === "2"){
$("input[name=show]").val("bar");
}else{
$("input[name=show]").val("too");
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="hidden_input" style="display: none">
<div class="barang_in">
<label class="col-md-4 control-label">Kode Hanca</label>
<select onchange='showModel(this.value)' name="id_vendor_detail" class="form-control" required="">
<option value="">- PILIH -</option>
<option value="1">- Orange -</option>
<option value="2">- Pink -</option>
<option value="3">- Red -</option>

</select>
<button onclick="addBarang()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i> add</button>
<button type="button" data-toggle="tooltip" data-placement="top" title="kurangi barang" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_barang"><i class="fa fa-minus"></i> Remove</button>
<input type='text' name='show'>
</div>
</div>
<div class='target_clone'>
</div>

</body>





when i clone data, its show many selectbox. and when i select the selectbox, i want to change
<input type='text' name='show'>
by value from
if else
. how can i do ?


dummy text : Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Phasellus at lectus orci. Quisque maximus hendrerit consequat.
Donec blandit facilisis est. Integer ac massa vitae ante vulputate
sagittis nec at nisl. Cras sit amet sem nec metus sodales eleifend a
ac nulla. Duis porta nisl in erat aliquet hendrerit. Integer mollis
non odio et pellentesque. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse cursus fringilla sem, facilisis malesuada
orci varius in. Nullam tristique nisi sed sem mattis, a finibus magna
mollis. Fusce erat sem, semper ac vulputate sit amet, imperdiet
sagittis ex

Answer

Do the following: clear the input after the cloning, at change select the show input that is relative to the select:

$(document).ready(function() {
  addBarang();
});

function addBarang() {
  var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
  $(".target_clone:last").append(new_barang);
  $(".barang_in_clone:last").find("input[name=show]").val('');
  //        $(".barang_in_clone:has(select)").addClass("select2");
}

$('body').on('click', '.btn_kurangi_barang', function() {
  $(this).closest('.barang_in_clone').remove();
});

function showModel(el){
if(el.value === ''){
$(el).siblings("input[name=show]").val("");
}else if(el.value === "1"){
$(el).siblings("input[name=show]").val("foo");
}else if(el.value === "2"){
$(el).siblings("input[name=show]").val("bar");
}else{
$(el).siblings("input[name=show]").val("too");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="hidden_input" style="display: none">
    <div class="barang_in">
      <label class="col-md-4 control-label">Kode Hanca</label>
      <select onchange='showModel(this)' name="id_vendor_detail" class="form-control" required="">
        <option value="">- PILIH -</option>
        <option value="1">- Orange -</option>
        <option value="2">- Pink -</option>
        <option value="3">- Red -</option>

      </select>
      <button onclick="addBarang()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i> add</button>
      <button type="button" data-toggle="tooltip" data-placement="top" title="kurangi barang" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_barang"><i class="fa fa-minus"></i> Remove</button>
      <input type='text' name='show'>
    </div>
  </div>
  <div class='target_clone'>
  </div>

</body>

Comments