Блог

Главная - Вопросы по программированию - Как изменить значение внутри поля ввода, сгенерированного jQuery?

Как изменить значение внутри поля ввода, сгенерированного jQuery?

#javascript #html #jquery

Вопрос:

пожалуйста, помогите мне решить эту проблему, у меня есть входное значение (вес), сгенерированное jQuery, я знаю, что оно не изменит свое значение из-за цикличности в моем коде, но есть ли другой способ сделать это ? Цель состоит в том, что я хочу автоматически сгенерировать входное значение веса, но я также могу его изменить.

если фрагмент не работает, вот ссылка : https://jsfiddle.net/s3grkqxm/

Спасибо вам за вашу помощь.

 var numRows = 2, ti = 5;

function isNumber(n) {
  return !isNaN(parseFloat(n)) amp;amp; isFinite(n);
}

function recalc() {
  var berat = 0;
  var qty = 0;
  var grandtotal = 0;
  var grandtotalbtg = 0;
  $('#kas_table').find('tr').each(function() {
    var berat = $(this).find('input.berat').val();
    var qty = $(this).find('input.qty').val();
    var subtotal = (berat * qty);
    let berat_max = $(this).find('option:selected').data('berat');
    $(this).find('input.subtotal').val(Math.round(subtotal * 100) / 100);
    $(this).find('input.berat').val(berat_max).text();
  });
}

$(function() {
  $('div.table-responsive').on("keyup change blur", recalc);
});



var i=0;
$('#add_new').click(function(){
  i  ;
  $('#mainbody').append('<tr><td>'  
    '<select class="form-control nama" name="addmore[' i '][nama]" id="nama' i '" required >'  
    '<option disabled="disabled" selected="selected" value="" >Select Produk</option>'  
  '<option value="1" data-berat="100">Item 1</option>'  
    '<option value="1" data-berat="170">Item 2</option>'  
    '</select></td>'  
    '<td><input class="form-control qty" type="number" name="addmore[' i '][qty]" id="qty' i '" required ></td>'  
    '<td><input step=".001" class="form-control berat" type="number" name="addmore[' i '][berat]" id="berat' i '" required ></td>'  
    '<td><input class="form-control subtotal" type="number" name="addmore[' i '][subtotal]" id="subtotal' i '" required readonly></td>'
  )
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table-bordered" width="100%" id="kas_table">
    <thead>
      <tr>
        <th width="40%">Name</th>
        <th width="10%">Qty</th>
        <th width="10%">Weight</th>
        <th>Subtotal KG</th>
        <th>
          <button id="add_new" type="button" name="add_new" class="btn btn-sm btn-success">  </button>
        </th>
      </tr>
    </thead>
    <tbody id="mainbody">
      <tr>
        <td><select class="form-control nama" name="addmore[0][nama]" id="nama0" required >
        <option disabled="disabled" selected="selected" value="" >Select Produk</option>
        <option value="1" data-berat="100">Item 1</option>
        <option value="2" data-berat="170">Item 2</option>
        </select></td>
        <td><input class="form-control qty" type="number" name="addmore[0][qty]" id=qty0 required></td>
        <td><input step=".001" class="form-control berat" type="number" name="addmore[0][berat]" id="berat0" required></td>
        <td><input class="form-control subtotal" type="number" name="addmore[0][subtotal]" id="subtotal0" readonly></td>
      </tr>
  </tbody>
  </table>               
</div>

Комментарии:

1. Ваш jsFiddle немедленно вылетает с Uncaught ReferenceError: getdate is not defined (я видел, что вы отредактировали свой вопрос выше, чтобы эта ошибка исчезла)

2. Также, пожалуйста, обновите фрагмент с фактическим примером вместо '@foreach($produk as $pro)' '<option value="{{$pro->id}}" data-berat="{{ $pro->berat_maksimal }}">{{$pro->nama}}</option>' '@endforeach'

3. извините, забыл отредактировать эту часть

4. Так в чем же сейчас проблема? Похоже, сейчас это нормально работает здесь, во фрагменте … или что именно должно быть не так?

5. Я хочу иметь возможность изменять входное значение, видите ли, когда вы его меняете, оно возвращается к исходному значению, я не могу изменить значение с тем, которое я хочу. Или, может быть, есть другой подход к этому ?

Ответ №1:

причина, по которой при изменении веса он возвращается к исходному значению, заключается в том, что вы обновляете всю таблицу, включая раскрывающийся список, поэтому он возвращает значение, которое должно быть установлено после изменения раскрывающегося списка. $('div.table-responsive').on("keyup change blur", recalc); из-за этого.

вам просто нужно отделить каждое событие изменения элемента, чтобы получить правильные результаты. Я установил значение в весе в раскрывающемся списке изменение, добавив это

 $(document).on('change', 'select', function() {
        $('#kas_table').find('tr').each(function() {
            let berat_max = $(this).find('option:selected').data('berat');
            $(this).find('input.berat').val(berat_max).text();
        });
    });

и отдельно назовите количество и вес, используя это

 $('.qty').on("keyup change blur", recalc);
$('.berat').on("keyup change blur", recalc);

наконец, вот ваш обновленный код, работающий так, как ожидалось, надеюсь, он будет вам полезен.

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script>   
           var numRows = 2, ti = 5;
           function isNumber(n) {
               return !isNaN(parseFloat(n)) amp;amp; isFinite(n);
           }

           function recalc() {
               var berat = 0;
               var qty = 0;
               var grandtotal = 0;
               var grandtotalbtg = 0;
               $('#kas_table').find('tr').each(function() {
                   var berat = $(this).find('input.berat').val();
                   var qty = $(this).find('input.qty').val();
                   var subtotal = (berat * qty);
                   $(this).find('input.subtotal').val(Math.round(subtotal * 100) / 100);
   
               });
           }
           function selectProduct(e)
           {

               let berat_max = $(e).find('option:selected').data('berat');
               $(e).parent().parent().find('input.berat').val(berat_max).text();
               var berat =   $(e).parent().parent().find('input.berat').val();
               var qty =  $(e).parent().parent().find('input.qty').val();
               var subtotal = (berat * qty);
               $(e).parent().parent().find('input.subtotal').val(Math.round(subtotal * 100) / 100);
                 
           }
           $(function() {
               $(document).on('change', 'select', function() {
               
                   $('.qty').on("keyup change blur", recalc);
                   $('.berat').on("keyup change blur", recalc);
               });

               var i=0;
               $('#add_new').click(function(){
                   i  ;
                   $('#mainbody').append('<tr><td>'  
                     '<select class="form-control nama" name="addmore[' i '][nama]" id="nama' i '" onchange="selectProduct(this)" required >'  
                     '<option disabled="disabled" selected="selected" value="">Select Produk</option>'  
                   '<option value="1" data-berat="100">Item 1</option>'  
                     '<option value="1" data-berat="170">Item 2</option>'  
                     '</select></td>'  
                     '<td><input class="form-control qty" type="number" name="addmore[' i '][qty]" id="qty' i '" required ></td>'  
                     '<td><input step=".001" class="form-control berat" type="number" name="addmore[' i '][berat]" id="berat' i '" required ></td>'  
                     '<td><input class="form-control subtotal" type="number" name="addmore[' i '][subtotal]" id="subtotal' i '" required readonly></td>'
                   )
               });
           });
    </script>
    </head>
    <body>
   <div class="table-responsive">
  <table class="table-bordered" width="100%" id="kas_table">
    <thead>
      <tr>
        <th width="40%">Name</th>
        <th width="10%">Qty</th>
        <th width="10%">Weight</th>
        <th>Subtotal KG</th>
        <th>
          <button id="add_new" type="button" name="add_new" class="btn btn-sm btn-success">  </button>
        </th>
      </tr>
    </thead>
    <tbody id="mainbody">
      <tr>
        <td><select class="form-control nama" name="addmore[0][nama]" id="nama0" onchange="selectProduct(this)" required >
        <option disabled="disabled" selected="selected" value="">Select Produk</option>
        <option value="1" data-berat="100">Item 1</option>
        <option value="2" data-berat="170">Item 2</option>
        </select></td>
        <td><input class="form-control qty" type="number" name="addmore[0][qty]" id=qty0 required></td>
        <td><input step=".001" class="form-control berat" type="number" name="addmore[0][berat]" id="berat0" required></td>
        <td><input class="form-control subtotal" type="number" name="addmore[0][subtotal]" id="subtotal0" readonly></td>
      </tr>
  </tbody>
  </table>               
</div>
  </body>
  </html>

Комментарии:

1. Спасибо, но все равно некоторые не сработали, когда вы меняете вес в первой строке, а затем добавляете новую строку, выбираете элемент, значение строки 1 возвращается к исходному значению.

2. @MulyonoT Я обновил код, пожалуйста, проверьте, теперь он работает так, как ожидалось.

3. Спасибо вам за ваше решение, оно работает безупречно 🙂

Метки: ,