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

ProgramBox

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

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery

Вопрос:

Я хочу сделать следующее. Попытка заставить текстовые поля столбца количества иметь значение по умолчанию на основе выпадающего списка и текстового поля в одной динамической таблице.

Итак, на рисунке ниже, когда выпадающий список единиц устанавливается равным 2, а затем вводится количество 5 в строке 2, любая строка ниже будет иметь количество по умолчанию из строки 2. Таким образом, строки 6 и 7 должны иметь значение по умолчанию как 5.

 <html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Unit</th>
       <th>Name</th>
       <th>Quantity</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
let restricts = ["bags", "kg"];
function hideQuantity(e) {
    if (restricts.indexOf(e.target.value) > -1) {
        e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
    } else {
        e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
    }
}

$(document).ready(function(){
    $(document).on('click', '.add', function () {
        var html = '';
        html  = '<tr>';
        html  = '<td><select onclick="hideQuantity(event)" name="item_unit[]" id="item_unit" class="form-control item_unit">';
        html  = '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><?php echo numopt(); ?>';
        html  = '</select></td>';
        html  = '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
        html  = '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
        html  = '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });

 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
    
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_name').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Enter Item Name at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
  
  $('.item_quantity').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Enter Item Quantity at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
  
  $('.item_unit').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Select Unit at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
     
  var form_data = $(this).serialize();
  if(error == '') {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data) {
     if(data == 'ok') {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  } else {
   $('#error').html('<div class="alert alert-danger">' error '</div>');
  }
 });
});

</script>

1. Таким образом, он срабатывает после обновления значения количества и уверенности, что выбрана единица измерения … ? [Ввод количества при обмене] => получить выбранный val() «Ссылка» => каждый выбранный сравнить $ (‘#Select’).val() со ссылкой => при равенстве обновить поле количества в той же строке ()

2. Это просто идея / алгоритм… Я опубликую ответ завтра, если вы его не решили.

3. Я пытался и потерпел неудачу. Я могу настроить качество по умолчанию на значение, но не на основе значения сверху.

Ответ №1:

[ОБНОВЛЕНО], чтобы предлагать обновления с обеих сторон. Я надеюсь, что это работает так, как вы ожидали (но все же, как я предложил в своем комментарии, рекомендуется подумать о другом способе управления этим, используя метод, который не «зависит от дизайна». Как объекты Javascript или localStorage …)

 let restricts = ["bags", "kg"];
function hideQuantity(e) {
    if (restricts.indexOf(e.target.value) > -1) {
        e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
    } else {
        e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
    }
}

$(document).ready(function(){
    $(document).on('click', '.add', function () {
        var html = '';
        html  = '<tr>';
        html  = '<td><select onclick="hideQuantity(event)" name="item_unit[]" id="item_unit" class="form-control item_unit">';
        html  = '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>';
        html  = '</select></td>';
        html  = '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
        html  = '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
        html  = '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });

 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
    
    $(document).on('change keyup focusout','.item_quantity',function(){
        //I called it in french to avoid confusion with value val...
        var valeur =$(this).val();
        var unitreference= $(this).parents("tr").find("td:first select.item_unit").val();
        $('.item_unit').each(function(){
            if($(this).val()==unitreference ){
                $(this).parents("tr").find("td:eq(2) input.item_quantity").val(valeur).attr('disabled', 'disabled');
            }
        });
        $(this).removeAttr("disabled");
    })
    
    $(document).on('change','.item_unit',function(){
        //Update using the unit selector
        var selectedUnit =$(this).val();
        //Here we look for the Quantity field being used as Referece
        var quantRef= $('select option[value=' selectedUnit ']:selected').parents("tr").find("td:eq(2) input.item_quantity:not(:disabled)").val()
        //console.log(selectedUnit)     
        //console.log(quantRef)
        if(quantRef){
        $('.item_unit').each(function(){
            if($(this).val()==selectedUnit ){
                $(this).parents("tr").find("td:eq(2) input.item_quantity").val(quantRef).attr('disabled', 'disabled');
            }
            
        });
        }
    })
    
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_name').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Enter Item Name at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
  
  $('.item_quantity').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Enter Item Quantity at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
  
  $('.item_unit').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error  = "<p>Select Unit at " count " Row</p>";
    return false;
   }
   count = count   1;
  });
     
  var form_data = $(this).serialize();
  if(error == '') {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data) {
     if(data == 'ok') {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  } else {
   $('#error').html('<div class="alert alert-danger">' error '</div>');
  }
 });
});

 <html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Unit</th>
       <th>Name</th>
       <th>Quantity</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>

</body>
</html>

P.S: Извините, я был занят 🙂 Совет: если это возможно, вы могли бы добавить несколько классов в таблицы ячеек, чтобы оптимизировать свой код с помощью closest() .

1. Билель, это здорово, но 2 вещи. 1. есть ли способ обновить item_quantity, если выбранная item_unit совпадает? 2. есть ли способ отключить item_quantity, которые позже добавляются, которые являются одинаковыми, но первое item_quantity не отключено, чтобы его можно было изменить и обновить ниже соответствующего item_quantity?

2. Похоже ли это на то, что я просил в своем ответе: вы хотели бы обновить значения количеств, если обновляется селектор единиц измерения? И для второго варианта: вы имеете в виду сохранение только одного поля количества (используемого в качестве ссылки) и отключение всех входных данных, которые копировали его значение? Возможно 🙂 Но вам также нужно подумать об UX и о том, как ваши пользователи могут это понять 😉 Я постараюсь его обновить