9

Question 1: Given 

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" name="foo" value="3" />

In Mootools, how do I return "2" given an input of "foo", assuming that the second radio button was clicked.

Question 2: (it's related)- Given similar checkbox inputs, how do I return either an array or comma separated list of the checked values?

I'm wanting to submit the values of these inputs via Request.JSON, passing it as a GET parameter.

philfreo
  • 41,941
  • 26
  • 128
  • 141

9 Answers9

18

Assuming the name of the checkbox is "foo", to get the selected radio item, you can use:

var values = $$('input[name=foo]:checked'​​​​​​​​​​​​​​).map(function(e) { return e.value; });

This returns an array with 1 item, being the selected elements' value.

Or just extend an Array's prototype, and add a getFirst() method.

Array.implement({
    getFirst: function() {
        if(this.length == 0) {
            return null;
        }
        return this[0];
    }
});

Then you could do this:

var value = $$('input[name=foo]:checked').getFirst().value;

Similarly, to get all checked checkboxes, use:

var values = $$('input[name=foo]:checked'​​​​​​​​​​​​​​).map(function(e) { return e.value; });

The double dollar ($$) function is used to select multiple elements with a CSS selector. Then a map (part of Array class) can be applied to those elements to get just the needed value(s).

You can read more about these pseudo-selectors at http://mootools.net/docs/core/Utilities/Selectors

Anurag
  • 140,337
  • 36
  • 221
  • 257
  • 3
    for singular use, why not just use `formel.getElement("input[name=foo]:checked")` - no need for array dealings here. i'd take that approach and its more scalable and loop through multiple radios with this as callback. – Dimitar Christoff Mar 06 '10 at 14:37
  • 3
    i used $$ as the OP only had the field name in the question. But if the form element is available or it's id is known, then we can also use `$('formID').getElement('input[name=foo]:checked").value` – Anurag Mar 06 '10 at 17:35
  • Thanks. I used `$('formID').getElement('input[name=foo]:checked").value` for the radio (which could only have one value) and `$$('#formID input[name=foo]:checked')` for the checkboxes. – philfreo Mar 06 '10 at 20:53
  • And to get an array of the checked values, I did the following. LMK if there's a more elegant way. `var vals = []; $$('#formID input[name=ubers]:checked').map(function(e) { vals.push(e.value); });` – philfreo Mar 06 '10 at 21:07
  • @philfreo if you're pre-defining an array, then you should use each to iterate instead of map. map created an implicit array and since you're not returning anything from the mapper function (each value in that array is undefined). so either of these should be better: `var vals = $$('#formID input[name=ubers]:checked').map(function(e) { return e.value; });` or with predefining an array: `var vals = []; $$('#formID input[name=ubers]:checked').each(function(e) { vals.push(e.value); });` – Anurag Mar 07 '10 at 18:37
6

No need for

var value = $$('input[name=foo]:checked').getFirst().value;

Just use:

var value = $$('input[name=foo]:checked')[0].get('value');
adasdasdas
  • 61
  • 1
  • 1
3

Easy way for getting checked radio's value is:

$('formID').getElement('input[name=foo]:checked').get('value');

MooTools 1.4.5 - getElement()

Gets the first descendant element whose tag name matches the tag provided. CSS selectors may also be passed.

Mentioned earlier

$$('input[name=foo]:checked').get('value');

is also easy way for getting all checked checkboxes' values, working with 1.4.5 verison

BR

Dimcho
  • 143
  • 3
  • 8
2

this works for me.

$$('input[name=foo]:checked').pick().get('value');
vcxz
  • 4,038
  • 4
  • 18
  • 17
2

Here's how to get the radio's value:

var value =$$('input[name=type]:checked').get('value');

Quite easy....

animuson
  • 53,861
  • 28
  • 137
  • 147
weiqianglufromchina
  • 21
  • 1
2

The best answer is from weiqianglufromchina, but has this error

$$('input[name=type]:checked').get('value');

This should be

$$('input[name=RADIONAME]:checked').get('value');

tested on firefox, chrome, explorer. mootools 1.2.4 / 1.3

cheers

Alberto Zaccagni
  • 30,779
  • 11
  • 72
  • 106
xavip
  • 545
  • 5
  • 14
1

Just used this one lately in Mootools 1.11. I use:

var value = $$('input[name=foo]).filter(function(el) { 
   return el.getProperty("checked") 
})[0];

Quite long but working. Tried with FF 3.x

More recent version of Mootools can use a shorter syntax as the other answers provided.

dawez
  • 2,714
  • 2
  • 29
  • 50
0

The above code worked fine in Firefox but IE didn't like it at all. After a bit of tweaking came up with this horrible work around.

Add onchange="toggleChecked(this)" to each of the radios and then add this function into you JS file

function toggleChecked(el) {
    el.checked = !el.checked;
    el.checked = !el.checked;
}

and then to read which button has been selected

var selectFoo;
$$('input[name=foo]').each(function (el){
    if (el.checked == true) {
        selectFoo = el.value;
    }
});

Now if somebody could come up with a better IE solution I would appreciate it.

sleep-er
  • 440
  • 1
  • 4
  • 16
-1

nothing not work in Firefox 3.15.16 except expression:

var radio = $('adminForm').getElements("input[name='published']").filter(function(e) { if(e.checked) return e; })[0].value;

Sorry for the English!!!

Community
  • 1
  • 1
serviom
  • 121
  • 1
  • 6