How to asssign id to dynamically created textboxes?

Question

0.00/5 (No votes)

See more:

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;
    }

What I have tried:

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()?

Posted 8-Jan-19 2:17am

TARS166

Updated 8-Jan-19 4:09am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Bryian Tan · Answer 1 · 2019-01-08T03:30:00

Not clear what the issue are but the posted JavaScript seem functioning in it current form with a minor tweak. Based on the markup code. I'm guessing the dynamic elements were missing the onkeyup event. and the id should be "add...", based on your example instead of "n..."

JavaScript

// 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;
    }

Example: cp_textbox - JSFiddle[^]

W∴ Balboos, *GHB* · Answer 2 · 2019-01-08T04:09:00

I simply create the text-boxes with the name/id/event-handler built in at the time of generation:

Something like this, in a most generic way:

PHP

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

And call this type of function to generate your element, with various values for $i (such as sequential integers).

Remember, the function is a template - you need to modify it to your needs. an <input> element, for example, would not have a closing tag.

Note, also, that I didn't break the php up into a lot of small script intermixed with the HTML. Often that makes it just too difficult to read and thus buggy.

How to asssign id to dynamically created textboxes?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0