TARS166 Ответов: 2

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

I'm trying to display data in a loop of text fields from a value entered in another text box. 

The script used to work fine when the text fields were static. But when I looped through the text field, the data gets reflected only in the first text field, and rest of the fields remain blank, because the text box id is still static.


The master text box where the data is entered.

    <input class="form-control" type="text" name="n1" id="n1" onkeyup="sync()">

Area with the dynamic text fields.

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

///Text field where data is supposed to be mirrored and the id is static.
 
    <input class="form-control" type="text" name="n2" id="n2"/>  
//  
    
    <select class="form-control">
    <option>25%</option>
    <option>50%</option>
    <option>100%</option>
    </select><br> 
    </div><?php }?>
    

Script

    function sync()
    {
     var n1 = document.getElementById('n1');
     var n2 = document.getElementById('n2');
     n2.value = n1.value;
    }


Что я уже пробовал:

This is what I tried doing to dynamically assign 'id' to all the text boxes being created in the loop.

    for( var i=0; 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 +'" />');
    } 

And display the data like this.

    <div id = "addition"></div>

When I'm using this, nothing gets displayed. How do run it the loop and generate dynamic id's so that I can use it in the function sync()?

2 Ответов

Рейтинг:
1

Bryian Tan

Не ясно, в чем проблема, но опубликованный JavaScript, похоже, функционирует в его текущем виде с незначительной настройкой. На основе кода разметки. Я предполагаю, что динамические элементы отсутствовали. onkeyup событие. и идентификатор должен быть "add...", основываясь на вашем примере, а не "n..."

// find elements
  for( var i=0; 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" onkeyup="sync()" id="add'+ i +'" />');
    }

    function sync()
    {
     var n1 = document.getElementById('add0');
     var n2 = document.getElementById('add1');
     n2.value = n1.value;
    }


Пример: cp_textbox - JSFiddle[^]

Maciej Los

Наверное, ты прав!

TARS166

Привет. Это прекрасно работает в скрипке, но при использовании в программе выходные данные не отображаются в этой области :(

TARS166

Привет. Теперь я понимаю, в чем дело. Текстовые поля уже находятся в цикле. Есть ли способ просто создать "идентификатор" в цикле и добавить его в текстовые поля?

Bryian Tan

Я думаю, что ваш код уже делает это, назначая id в цикле he

Рейтинг:
1

W∴ Balboos, GHB

Я просто создаю текстовые поля с именем/идентификатором/обработчиком событий, встроенным во время генерации:

Что-то вроде этого, в самом общем виде:

<?php  
 function addElement($i) {
    $elemID = "elem$i";
    return "<element name='$elemID' id='$elemID'
             onEvent='eventHandler(\"$elemID\")'></element>";
 } // function addElement($i)
?>



И вызовите этот тип функции для генерации вашего элемента с различными значениями для $i (например, последовательные целые числа).

Помните, что функция является шаблоном - вам нужно изменить ее в соответствии с вашими потребностями. например, элемент <input> не будет иметь закрывающего тега.

Обратите также внимание, что я не разбил php на множество небольших скриптов, смешанных с HTML. Часто это делает его просто слишком трудным для чтения и, следовательно, глючным.

Maciej Los

Умно!

TARS166

Привет. У меня возникла проблема с вызовом функции для генерации выходных данных. Не могли бы вы любезно подсказать мне, как это сделать?

W∴ Balboos, GHB

Он возвращает строку - эхо ее

Если вы только что вырезали/вставляли и на самом деле не знаете, как это сделать, я предлагаю вам попробовать: ЗДЕСЬ