INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Find dynamic elements

Find dynamic elements

(OP)
Hi all

I have dynamic list as below. How can I find the element when the button is clicked? eg.. When id="But2" is clicked how do I find the word electric in id="pd_2"

Thanks.

CODE

<div class="row" id="row_2">   
    <div class="column" id="PaymentID_2">
        2
    </div> 
    <div class="column">
        NPower
    </div>    
    <div class="column" id="cat_2">
        Utilities
    </div>
    <div class="column" id="pa_2">
        88.88
    </div>
    <div class="column" id="pd_2">
        Electric
    </div>
    <div class="column">
        <input id="But2" type="button" value="Update" class="setPaymentValues" />
    </div>
     <div class="column">
     to-do
    </div>
    </div>
    <div class="row" id="row_1">   
    <div class="column" id="PaymentID_1">
        1
    </div> 
    <div class="column">
        b & Q
    </div>    
    <div class="column" id="cat_1">
        Tools /equipment
    </div>
    <div class="column" id="pa_1">
        20.00
    </div>
    <div class="column" id="pd_1">
        Some material
    </div>
    <div class="column">
        <input id="But1" type="button" value="Update" class="setPaymentValues" />
    </div>
     <div class="column">
     to-do
    </div>
    </div> 

Age is a consequence of experience

RE: Find dynamic elements

Replace 'But' with 'pd_' and read innerHTML

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Find dynamic elements

CODE --> jQuery)

$('input[type="button"]').on('click', function(e){
 e.preventDefault();
 var targetText = 
 $('#' + $(this).attr('id').replace('But','pd_')).text(); alert(targetText);
}); 

RE: Find dynamic elements

(OP)
Thanks jpadie. I will try this when I get home. Just about to go to work.

Age is a consequence of experience

RE: Find dynamic elements

of course you can also pass a value in the onclick event.

CODE

function myFunc(x){
 var txt = document.getElementById('pd_' + x).innerHTML;
 alert(txt);
}
<input id="But1" type="button" value="Update" class="setPaymentValues" onclick="myFunc(1)"/> 

or pass this.id and put a bit more intelligence into the function

CODE

function myFunc(x){
 var txt = document.getElementById(x.replace('But','pd_')).innerHTML;
 alert(txt);
}
<input id="But1" type="button" value="Update" class="setPaymentValues" onclick="myFunc(this.id)"/> 

or via event listeners (without jquery)

CODE

function initButtons(){
 var elems = document.querySelectorAll('input[type="button"]');
 for(var i = 0; i<elems.length; i++) elems[i].addEventListener('click', getPDText);
}
function getPDText(e){
 e.preventDefault();
 var txt = document.getElementById(this.id.replace('But','pd_')).innerHTML;
 alert(txt);
}
initButtons(); //put this at the bottom of your file, after the DOM is loaded 

using the last variant (or the jquery version slightly altered) exposes a method for you to call that will allow the event listeners to be added at any time. so if you add a line to the form dynamically then you can just call initButtons to apply the event listener to the new elements.

or lastly, if that's too much hassle then you can always apply a single listener to the document node and then apply a filter in the callback.

CODE

document.addEventListener('click', myFunc);

function myFunc(e){
    var that = e.target;
    if(that.nodeType == 1){
        if(that.nodeName == 'INPUT'){
            if(that.getAttribute('type') == 'button'){
                e.preventDefault();
                var elem = document.getElementById(that.id.replace('But','pd_'));
                alert(elem.innerHTML);
                return false;
            }
        }
    }
} 
The above shows you the long-hand method of filtering (which will work even for really old browser). a short hand could be this

CODE

document.addEventListener('click', myFunc);
function myFunc(e){
  var elems = Array.prototype.slice.call( document.querySelectorAll('input[type="button"]'),0);
  if(elems.indexOf( e.target ) > -1){
       e.preventDefault();
       var txt = document.getElementById(e.target.id.replace('But','pd_')).innerHTML;
       alert(txt);
       return false;
  }
} 

RE: Find dynamic elements

(OP)
That's excellent thanks! Works well!

Age is a consequence of experience

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close