CODEWITHSUNDEEP
jqueryajaxselectclone
wawan Setiyawan
wawan Setiyawan

Reputation: 371

Select Onchange with ajax

i have problem with change by ajax. this is my code :

$(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();
});

 //Tampilkan model ketika memilih kode hanca
    function showModel(el) {
        if (el === "") {
            $(el).siblings("input[name=model]").val("");
        } else {
            $.ajax({
                url: 'vendor_inout/vendor_inout_crud.php',
                type: 'POST',
                dataType: 'JSON',
                data: {id_vendor_detail: el, type: "get_model"}, //get model dan ukuran
                success: function (data) {
                    console.log(data);
                    $(el).siblings("input[name=model]").val(data.nama_model + " " + "(" + data.ukuran + ")");
                },
                error: function (e) {
                    //called when there is an error
                    console.log(e.message);
                }
            });
        }
    }
<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>

when i select the selectbox, it make my browser hang . how to fix it ?

//this is dummy text for pass the question because mostly code : 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

Upvotes: 0

Views: 8187

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

el is the element not the value of the element

use el.value to get the selected value or $(el).val(); via jquery 

  function showModel(el) {
        if (el.value === "") {
            $(el).siblings("input[name=model]").val("");
        } else {
            $.ajax({
                url: 'vendor_inout/vendor_inout_crud.php',
                type: 'POST',
                dataType: 'JSON',
                data: {id_vendor_detail: el.value, type: "get_model"}, //get model dan ukuran
                success: function (data) {
                    console.log(data);
                    $(el).closest('.barang_in').find("input[name='model']").val(data.nama_model + " " + "(" + data.ukuran + ")");//get the parent element and then find the input
                },
                error: function (e) {
                    //called when there is an error
                    console.log(e.message);
                }
            });
        }
    }

Upvotes: 2

Related Questions