Find dynamic elements 1

[litton1]

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.

 <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 &amp; 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

 

[ChrisHirst]

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

 

[jpadie]

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

 

[litton1]

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

Age is a consequence of experience

 

[jpadie]

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

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

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)

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.

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

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

 

[litton1]

That's excellent thanks! Works well!

Age is a consequence of experience