Getting innerHTML text from selected checkboxes in Prototype

Question

Hi, I need to get the text from the selected checkboxes in a form. Ifhe form is:

<form action="save" method="post" name="reunform" id="reunform" >
 <div id="listad">
  <ul id="litemsd">
   <li class="litemd"><input type="checkbox" name="d1" />Number One</li>
   <li class="litemd"><input type="checkbox" name="d2" />Numer Two</li>
   <li class="litemd"><input type="checkbox" name="d3" />Numer Three</li>
  </ul>
 </div>
 ...
</form>

Using Prototype: How can I get the string "Number One\nNumberThree" should these be selected ?

To test something I tried:

$$('li.litemd').pluck('checked').each(function(s) {
    alert(s.innerHtml)
  });

But I'm getting "s is undefined" in firebug.

Thanks

Answer 1

You´re looking for the li´s innerHTML, not the input´s.

Heres two things you could do:

1, but not so beautiful:

$$('li.litemd').pluck('checked').each(function(s) {
    alert(s.up().innerHtml.split('/>')[1])
});

2, wrap the text in extra divs

<li class="litemd"><input type="checkbox" name="d1" /><div>Number One</div></li>
<li class="litemd"><input type="checkbox" name="d2" /><div>Numer Two</div></li>
<li class="litemd"><input type="checkbox" name="d3" /><div>Numer Three<div></li>

and then

$$('li.litemd').pluck('checked').each(function(s) {
    alert(s.next().innerHTML)
});

Answer 2

First of all, you should be using <label> tags on that checkbox text. This is an accessibility concern. Using labels has the added benefit of being able to click the label text to check the box, which is something that many users (myself included) have grown accustomed to...

<ul id="litemsd">
  <li class="litemd">
    <input type="checkbox" id="d1" name="d1" />
    <label for="d1">Number One</label>
  </li>
  <li class="litemd">
    <input type="checkbox" id="d2" name="d2" />
    <label for="d2">Numer Two</label>
  </li>
  <li class="litemd">
    <input type="checkbox" id="d3" name="d3" />
    <label for="d3">Numer Three</label>
  </li>
</ul>

As an additional benefit, this makes your code a lot easier...

$$('li.litemd input:checked').each(function(s) {
  alert(s.next().innerHTML)
});

Answer 3

Solved in this thread ... http://stackoverflow.com/questions/3830748/undefined-variable-in-array-in-prototype