Wednesday 7 August 2013

Get value of twitter bootstrap radio button group in Meteor

Get value of twitter bootstrap radio button group in Meteor

I know that the're a lot of topics around this, but unfortunately, I can't
find a working solution. So here's my question.
I have a meteor template with following button group in it:
<template name="test">
<form class="form-horizontal" id="search_form">
<fieldset>
<div class="form-actions">
<div class="btn-group" data-toggle="buttons-radio" id="my_radiogroup">
<button type="radio" class="btn my_button" name="knop"
value="1">OR</button>
<button type="radio" class="btn my_button" name="knop"
value="2">AND</button>
</div>
</div>
</fieldset>
</form>
</template>
Now I want to get the value of the selected radiobutton (OR or AND).
Therefore I tried following solutions, based on what I could find on the
web and on Stack:
First solution:
Template.test.events({
'click #my_radiogroup' : function(e,t) {
var element = t.find('button:radio[name=knop]:checked');
alert($(element).val());
}
});
Second solution (based on the active class from twitter bootstrap):
Template.test.events({
'click #my_radiogroup' : function(e,t) {
var element = t.find("#my_button.active").value;
alert(element);
}
});
I've tried a third solution with this changes in my template:
<input type="hidden" id="alignment" value="" />
<div class="btn-group alignment" data-toggle="buttons-radio">
<button type="button" class="btn">OR</button>
<button type="button" class="btn">AND</button>
</div>
And with this code in my *.js file:
Template.test.events({
'click #alignment.btn' : function(e,t) {
var element = val(this.text());
alert(element);
return false;
}
});
However, none of this solutions works. Who wants how I can get the value
of the selected radiobutton?
Thanks.

No comments:

Post a Comment