Click here to Skip to main content
14,386,431 members
Rate this:
Please Sign up or sign in to vote.
I'm trying to assign id's to some text fields that's getting created dynamically in a loop. And after the series of text boxes are created, I want to call a function on master text box, which reflects the data entered in one text box to all other text boxes.

*Master text box where the value will be entered*
<input class="form-control" type="text" name="add" id="add" onkeyup="sync()">

*script for reflecting data in all text boxes entered in the master text box*
function sync()
     var n1 = document.getElementById('add0');
     var n2 = document.getElementById('add1');
     var n3 = document.getElementById('add2');
     var n4 = document.getElementById('add3');
     var n5 = document.getElementById('add4');
     var n6 = document.getElementById('add5');
     var n7 = document.getElementById('add6');
     var n8 = document.getElementById('add7');
     n8.value = n7.value = n6.value = n5.value = n4.value = n3.value = n2.value = n1.value;

*The div which is in the loop that consists of the text boxes where data will be reflected from the master text box*
<?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"/>
<div id="addition"></div>  <--- OUTPUT IS SUPPOSED TO BE GENERATED HERE
<select class="form-control">
</div><?php }?>

What I have tried:

*script for assigning dynamic id's*
<pre>for( var i=0; i<8; 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 +'" />');

The problem is that this script works fine in the fiddle, but output is not getting generated in the actual program. And when I use the script inside the loop in the actual program, it creates a series of text boxes only in the first iteration of the while loop.
Is there a way only create the id's dynamically and append it in the input area, instead of putting the input itself in the loop like I have done?
Updated 9-Jan-19 3:45am
Rate this:
Please Sign up or sign in to vote.

Solution 1

Define a variable and put this variable in input id > id = variable.
then define an event handler and change the variable value to your desire value.
just plan to take id of input for your goal after above handler triggered >> it means you have not to sync onkeyup for all value but sync each element when needed before your main purpose .
Rate this:
Please Sign up or sign in to vote.

Solution 2

This is not significantly different than your previous post:
How to asssign id to dynamically created textboxes?[^]

"add dynamic id to text boxes . . . "

You will need to distinguish the textboxes to put ID's into them and if they don't have id's then how do you plan to single out any particular one?   Judging by the lack of quality in your code it's unlikely you'd be able to handle this at the "node level".
TARS166 9-Jan-19 8:49am
It's alright, I got it. I just had to assign dynamic id's in the area where the code was supposed to get displayed. The code is working now, thanks :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100