Изменение содержимого одного поля ввода после клонирования полей формы

У меня есть интерфейс для моих администраторов, где они могут добавлять поля в базу данных. Если они хотят добавить несколько полей, они могут легко добавить новую строку. Это делается путем клонирования через JavaScript. Теперь есть одно раскрывающееся меню, и на основе выбора из раскрывающегося списка я хочу записать значения по умолчанию в поля ввода текста для min[] и max[].

Это отлично работает, если у меня есть только одна строка. Но если я клонирую его несколько раз и делаю выбор (например, я выбираю опцию «relative_number») только в одной строке (например), поля min и max обновляются в каждой строке. Что я могу сделать, чтобы при выборе раскрывающегося списка в определенной строке обновлялись только минимальные и максимальные значения в одной строке?

Изменение содержимого одного поля ввода после клонирования полей формы
Вот мой код:

<div class = "wrapper">
   <div class = "entities_wrap">   
      <div class = "row">
        <div class = "col-md-3">
       <label>Name</label>
           <input type = "text" name = "entity_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_name[]" />
        </div>
        <div class = "col-md-3">
       <label>Field Name</label>
           <input type = "text" name = "entity_field_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_field_name[]" />
        </div>
        <div class = "col-md-2">
            <label>Category</label>
            <select id = "entity_field_type[]" name = "entity_field_type[]" class = "form-select">                                                                 <option value = ""></option>                                                 <option value = "absolute_number">absolute_number</option>                                                            <option value = "relative_number">relative_number</option>                                                    <option value = "likert_5">likert_5</option>                                                      <option value = "likert_7">likert_7</option>                                                              <option value = "string">string</option>                                                       </select>
         </div>
         <div class = "col-md-1 minValue">
             <label>Min</label>
             <input type = "text" class = "form-control min" id = "min[]" name = "min[]" value = ""/>
    </div>
    <div class = "col-md-1">
        <label>Max</label>
        <input type = "text" class = "form-control max" id = "max[]" name = "max[]" value = ""/>
    </div>
        <div class = "col-md-1" style = "vertical-align: middle;">
         <label>&nbsp;</label>
         <div style = "margin: 0px 10px;">
             <i class = "fas fa-trash remove-item"></i></span>
         </div>
    </div>  
    <div class = "col-md-1" style = "vertical-align: middle;">
        <label>&nbsp;</label>
        <div style = "margin: 0px 10px;">
        <i class = "fas fa-plus add-plus"></i> <span class = "plus">Add Line</span>
        </div>
    </div>
      </div><br>
    </div>
 </div>
 <script>
$(document).ready(function () {
            
$(".add-plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".remove-item").click(function () {           
$(this).closest(".entities_wrap").remove();
});
            
});

$('select[id^ = "entity_field_type"]').on('change', function()
{
    var sel_cat = this.value;

    if (sel_cat == 'relative_number')
    {
        $('input[id^ = "min"]').val("0");
        $('input[id^ = "max"]').val("100");
    }
    if (sel_cat == 'absolute_number')
    {
        $('input[id^ = "min"]').val("0");
        $('input[id^ = "max"]').val("infinite");
    }
    // For the other options the code should work alike

 });
</script>

Уже пробовал разные способы решить эту проблему через DOM, идентифицируя родительские узлы, братья и сестры и т. д., но у меня это не работает.

Заранее большое спасибо за вашу помощь!

Ну, id должен быть уникальным. Если вы клонируете элементы, увеличивайте идентификатор, чтобы они были уникальными, тогда легко присвоить значение конкретным селекторам идентификаторов #min1#max1. Другой «трюк» может состоять в том, чтобы назначить класс вновь клонированным элементам, после чего его будет легко найти и обновить; наконец, удалите класс после того, как вы назначили значения.

Jasen 21.03.2022 19:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хотя вам определенно следует рассмотреть динамическое изменение имен и идентификаторов ваших клонированных входов, проблема, с которой вы столкнулись, связана с вашими селекторами для min и max

В случае вашего javascript

  $('input[id^ = "min"]').val("0");
  $('input[id^ = "max"]').val("100");

Вы выбираете все min и max на странице. Вы необходимость, чтобы найти Связанныйmin и max, что означает найти шкаф .row в поле выбора, а затем найти дочерний min/max

  var $row = $(this).closest("div.row");
  $row.find('input[id^ = "min"]').val("0");
  $row.find('input[id^ = "max"]').val("100");

jQuery ближайший()

jQuery найти ()

Вот пример функционирующего фрагмента.

$(document).ready(function() {

  $(".add-plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".remove-item").click(function() {
    $(this).closest(".entities_wrap").remove();
  });

});

$('select[id^ = "entity_field_type"]').on('change', function() {
  var sel_cat = this.value;
  var $row = $(this).closest("div.row"); //find the parent row we are in.
  if (sel_cat == 'relative_number') {
    $row.find('input[id^ = "min"]').val("0"); //use that row to find the related min
    $row.find('input[id^ = "max"]').val("100"); //use that row to find the related max
  }
  if (sel_cat == 'absolute_number') {
    $row.find('input[id^ = "min"]').val("0");
    $row.find('input[id^ = "max"]').val("infinite");
  }
  // For the other options the code should work alike

});
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "entities_wrap">
    <div class = "row">
      <div class = "col-md-3">
        <label>Name</label>
        <input type = "text" name = "entity_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_name[]" />
      </div>
      <div class = "col-md-3">
        <label>Field Name</label>
        <input type = "text" name = "entity_field_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_field_name[]" />
      </div>
      <div class = "col-md-2">
        <label>Category</label>
        <select id = "entity_field_type[]" name = "entity_field_type[]" class = "form-select">
          <option value = ""></option>
          <option value = "absolute_number">absolute_number</option>
          <option value = "relative_number">relative_number</option>
          <option value = "likert_5">likert_5</option>
          <option value = "likert_7">likert_7</option>
          <option value = "string">string</option>
        </select>
      </div>
      <div class = "col-md-1 minValue">
        <label>Min</label>
        <input type = "text" class = "form-control min" id = "min[]" name = "min[]" value = "" />
      </div>
      <div class = "col-md-1">
        <label>Max</label>
        <input type = "text" class = "form-control max" id = "max[]" name = "max[]" value = "" />
      </div>
      <div class = "col-md-1" style = "vertical-align: middle;">
        <label>&nbsp;</label>
        <div style = "margin: 0px 10px;">
          <i class = "fas fa-trash remove-item"></i></span>
        </div>
      </div>
      <div class = "col-md-1" style = "vertical-align: middle;">
        <label>&nbsp;</label>
        <div style = "margin: 0px 10px;">
          <i class = "fas fa-plus add-plus"></i> <span class = "plus">Add Line</span>
        </div>
      </div>
    </div><br>
  </div>
</div>

Большое спасибо и низкий поклон Steve0! Простое решение, и оно отлично работает!

Dee 22.03.2022 09:51

Другие вопросы по теме