Как добавить динамические идентификаторы в текстовые поля?

Я пытаюсь назначить идентификатор некоторым текстовым полям, которые создаются динамически в цикле.

Div, который находится в цикле, состоящем из текстовых полей.

<!-- DATA ENTERED IN THIS TEXT BOX WILL BE REFLECTED IN ALL THE TEXT BOXES CREATED IN THE LOOP-->
<div class = "col-sm">
                <h5><span class = "badge badge-dark">Add Quantity:</span></h5>
           <input class = "form-control" type = "text" name = "add0" id = "add0" onkeyup = "sync()">

           </div>

<!-- SCRIPT FOR REFLECTING DATA -->

    function sync()
        {
         var add0 = document.getElementById('add0');
         var add1 = document.getElementById('add1');
         var add2 = document.getElementById('add2');
         var add3 = document.getElementById('add3');
         var add4 = document.getElementById('add4');
         var add5 = document.getElementById('add5');
         var add6 = document.getElementById('add6');
         var add7 = document.getElementById('add7');
         var add8 = document.getElementById('add8');
         add8.value = add7.value = add6.value = add5.value = add4.value = add3.value = add2.value =  add1.value = add0.value;
        }


<?php 
<!-- GETS AN ARRAY OF DATA SCANNED IN THE PREVIOUS PAGE -->
$strings = explode(PHP_EOL,($_SESSION['grid']));
$sa = [];
foreach ($strings as $s) {
array_push($sa, "'".$s."'");
}   
$d=implode(',', $sa);

<!-- SQL QUERY -->
$sql = "select distinct size from items where main_group IN(select distinct main_group from items where addl_item_code_barcode IN ($d)) ORDER BY size";
$result = pg_query($db, $sql);
?>
<div class = "row">

<!-- THIS LOOP WILL CREATE 8 DIV'S BECAUSE THERE ARE 8 SIZES 36-50 -->
<?php  while($res = pg_fetch_assoc($result)){ ?>

    <div class = "col-md-2 show-hide">
    <input type = "text" value = "<?php echo $res['size']; ?> " readonly 
    style = "background-color: #F5F5F5;" class = "form-control"/>

    <!-- // OUTPUT WILL BE GENERATED HERE -->
    <div id = "addition"></div> 

    <select class = "form-control">
       <option>25%</option>
       <option>50%</option>
       <option>100%</option>
    </select><br> 
    </div>
</div>
           <br>
           <br>

               <button type = "submit" value = "submit" class = "btn btn-primary"><i class = "fas fa-paint-brush"></i>Apply</button>
 </form>
<?php }?>

<!-- The script that I tried for assigning unique id's -->    
$(document).ready(function() {

  for( var i=1; i<9; i++)  //i<9 because that's the maximum number of 
                           // text fields to be created is 8.     
    {    
         $('#addition')
           .append('<input class = "form-control" type = "text" name = "add" id = "add'+i+'" />');
    }

Проблема в том, что этот сценарий создает серию текстовых полей только на первой итерации цикла while.

Вот как это выглядит.

Здесь на выходе создаются все 8 текстовых полей под полем «размер», то есть «36». Как мне получить второе текстовое поле под 38, третье под 42 и так далее ...

Есть ли способ создать идентификатор только динамически и добавить его в область ввода вместо того, чтобы помещать сам ввод в цикл, как это сделал я?

Покажите нам здесь свой полный HTML-код.

Yogendrasinh 09.01.2019 12:04

У вас не может быть больше одинаковых идентификаторов. ID должен быть уникальным. $ ('# id') возьмет только первый элемент с этим идентификатором. Дайте своим DIV один и тот же класс и в jQuery адресуйте их все с помощью $ ('. Class')

sbrbot 09.01.2019 12:05

Привет, сбрбот. Теперь я понял, в чем проблема. Но не могли бы вы сказать мне, как я могу присвоить div уникальный идентификатор? Я не понял последней части вашего ответа: /

Cooper 09.01.2019 12:26

Если вы прочитаете свой вопрос и представите, что вы - как и мы - знаете ничего больше о своей проблеме, сможете ли вы понять вопрос? Что за поле "размер"? Где «область ввода»? Почему в вашем вопросе используется PHP, совершенно не относящийся к вопросу?

David Thomas 09.01.2019 12:32

Подожди. Я выложу весь код.

Cooper 09.01.2019 12:36

Не размещайте код все, только код минимальный воспроизводимый пример.

David Thomas 09.01.2019 12:54

Пожалуйста, проверьте сейчас.

Cooper 09.01.2019 13:07
Поведение ключевого слова "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) для оценки ваших знаний,...
2
7
475
2

Ответы 2

var text =  "";
for(var i=0;i<11;i++)
{
   text += '<input class = "form-control" type = "text" name = "add" id = "add_'+i+'" /></br>';
}
$("#addition").html(text);
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "addition"></div>

У меня такой же выходной знакомый. Вероятно, есть какая-то проблема в цикле while, в котором я вызываю вывод.

Cooper 09.01.2019 12:23

Вы можете установить идентификатор внутри цикла while, но вы должны установить уникальный идентификатор. Может, стоит включить в id итератор цикла. Попробуйте следующий пример:

<?php  while($res = pg_fetch_assoc($result)){ ?>
<div class = "col-md-2 show-hide">
<input type = "text" id = "field<?php echo $res['size']; ?>" value = "<?php echo $res['size']; ?> " readonly 
style = "background-color: #F5F5F5;" class = "form-control"/>

<div id = "addition"></div> // OUTPUT WILL BE GENERATED HERE

<select class = "form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select><br> 
</div><?php }?>

Не могли бы вы посоветовать мне, как это сделать? Я не вижу изменений в коде: /

Cooper 09.01.2019 12:22

id = "field <? php echo $ res ['size'];?>" <- добавьте это в тег ввода

David Aigner 09.01.2019 13:56

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