CODEWITHSUNDEEP
javascripthtmlgetelementbyid
Switchkick
Switchkick

Reputation: 2796

How do I retrieve an element's id by its "value"?

I am currently doing a Sharepoint customization and am running into a bit of an issue where I need to call a function if a particular element id is selected. The problem is that the element ID changes every time we install the Sharepoint instance so what I am aiming to do is identify the element id by its "value". To give my question some context, this is the html (which cannot be altered):

<span class="ms-RadioText" title="Yes"><input id="378Ukj200" name="radio_button" value="ctl00" checked="checked" type="radio"><label for="378Ukj200">Yes</label></span>
<span class="ms-RadioText" title="No"><input id="378Ukj201" name="radio_button" value="ctl01" type="radio"><label for="378Ukj201">No</label></span>

And these are the current getElementID based statements (which won't work once we more the instance to a production box):

document.getElementByID('378Ukj200').onclick = new Function('checkForRadioChange("Yes");');
document.getElementByID('378Ukj201').onclick = new Function('checkForRadioChange("No");');

I was hoping to even achieve something to the effect of this using the span tag, for example (of course this would never work for multiple reasons):

var rispan = document.getElementsByTagName('span');

for( var i = 0, j= rispan.length; i < j; i+=1 ) {
    var classes = span[i].getAttribute("title");
    if( classes ) {
       if( classes.indexOf("Yes") != -1) {
          onclick = new Function('checkForRadioChange("Yes");');
       }
       else if( classes.indexOf("No") != -1) {
          onclick = new Function('checkForRadioChange("No");');
       }
    }
}

Upvotes: 0

Views: 214

Answers (4)

elclanrs
elclanrs

Reputation: 94101

Not sure about what level of compatibility you need but in modern browsers it can be as simple as:

var inputs = document.querySelectorAll('input[title^="ctl"]');

[].forEach.call(inputs, function(input) {
  var label = input.nextSibling;

  input.addEventListener('click', function() {
    if (label.textContent == 'Yes') {
      ...
    }
  });
});

Upvotes: 1

user166390
user166390

Reputation:

Structure to match:

<span class="ms-RadioText" title="Yes">
    <input id="378Ukj200" name="radio_button" value="ctl00" checked="checked" type="radio">
    <label for="378Ukj200">Yes</label>
</span>

CSS selector for the input element:

span.ms-RadioText[title="Yes"] > input[name="radio_button"]

Use a library that allows CSS selectors. Win.

Upvotes: 1

Kaeros
Kaeros

Reputation: 1138

I would put my code inside a div with fixed id, then get the the children.

var nodes = document.getElementByID('div_id').children;

With this i would test for tagName in a loop and attach the onclick event where it is needed.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

Since the input is seemingly the only input child of the span, it's fairly trivial to get:

var input = rispan[i].getElementsByTagName('input')[0]
...
input.onclick = new Function ...

http://jsfiddle.net/ExplosionPIlls/Y74bn/

You should use function () {} syntax to define anonymous functions. new Function doesn't seem to be working so well for you. Additionally, onlick is antiquated and evil! You should use addEventListener, if it exists. Otherwise, attachEvent.

Upvotes: 1

Related Questions