Search code examples
jqueryajaxpushaddition

How to used each and push data to array in jquery

How to add data to array ? i have form input with some option and i used button add more for add section form input. I want to make the options that have been selected not displayed in the rest of the index. example :

  1. index 0 i chose G05B-IA1
  2. index 1 i chose G05B-IA2
  3. index 2 i chose G05B-IA3

And I store it in an array. i want got result like this [G05B-IA1,G05B-IA2,G05B-IA3] But, the result i got it is ['G05B-IA2', 'G05B-IA2', 'G05B-IA2']

RESULT

My Jquery Code

  $(document).on('change', '.slot_id', function(){
      cekslotid = $(this).val(); 
      console.log(cekslotid);
  });

  $(document).on('change', '.warehouse2', function(){
      var warehouseid = $(this).val(); 
      let idtarget  = $(this).data('idtarget');
      let cektarget = idtarget - 1;
      let slotid1   = $("#slot_id").val();
      let slotid2   = $("#slot_id"+cektarget+'').val();
      let data      = [slotid1];

  
  $('.slot_id').each(function() {
    data.push($(cekslotid).val());
  });

  console.log(data);

My HTML in view

<div class="add-more-pallet">
                <div class="row">
                    <div class="col-md-6">
                        <label>Pilih Gudang : </label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-warehouse"></i></span>
                            </div>
                            <select class="form-control" id="warehouse" required>
                                <option value="">-- Pilih Gudang --</option>
                                @foreach($warehouse as $row)
                                <option value="{{ $row->id_warehouse }}">{{ $row->warehouse_name }}</option>
                                @endforeach
                           </select>
                        </div>
                    </div>
                  <div class="col-md-5">
                        <label>Pilih Pallet : </label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-pallet"></i></span>
                            </div>
                            <select class="form-control slot_id" id="slot_id" name="slot_id[]" required><option value="">-- Pilih Pallet --</option></select>
                        </div>
                    </div>

My HTML in Jquery

'<div class="col-md-6">' + 
                        '<label>Pilih Gudang : </label>' +
                        '<div class="input-group mb-3">' +
                          '<div class="input-group-prepend">' +
                            '<span class="input-group-text"><i class="fas fa-warehouse"></i></span>' +
                          '</div>' +
                          '<select class="form-control warehouse2" data-idtarget="'+i+'" required>' +
                            '<option value="">-- Pilih Gudang --</option>' +
                            '<option value="G05B">Gudang 05 B</option>' +
                            '<option value="G09">Gudang 09</option>' +
                          '</select>' +
                        '</div>' +
                      '</div>' +
                      '<div class="col-md-5">' + 
                        '<label>Pilih Pallet : </label>' +
                        '<div class="input-group mb-3">' +
                          '<div class="input-group-prepend">' +
                            '<span class="input-group-text"><i class="fas fa-pallet"></i></span>' +
                          '</div>' +
                          '<select id="slot_id'+i+'" class="form-control slot_id" name="slot_id['+i+']" data-idtarget="'+i+'" required><option value="">-- Pilih Pallet --</option></select>' +
                        '</div>' +
                      '</div>' +

What's wrong with my code ? Why does the value stored in the array become double ?

Solution

  • You are pushing the same value over and over, the one you set here

    $(document).on('change', '.slot_id', function(){
  cekslotid = $(this).val(); 
});

    Here is a working method

    let data = $('.slot_id').map(function() { return this.value }).get();