I have a set of radio buttons, when I load my app the first radio is selected by default, so if I go to the second radio I can see different information in an HTML table, then If I change the values of my filters and then make a request I want the radio buttons refresh again and have the default selected but that is no happening, the second radio button is selected.
<div class="radio" ng-init="topTable='topCategory'">
<label class="radio-inline"><input type="radio" ng-model="topTable" value="topCategory" ng-change="updateTotals('topCategory')">TY Top 30 Categories</label>
<label class="radio-inline"><input type="radio" ng-model="topTable" value="topSupplier" ng-change="updateTotals('topSupplier')">TY Top 10 Suppliers</label>
<label class="radio-inline"><input type="radio" ng-model="topTable" value="topBrand" ng-change="updateTotals('topBrand')">TY Top 10 Brands</label>
</div>
The ng-init make the first radio to be selected I also used a function like this
function topRadios() {
$scope.topTable = "topCategory";
}
and my ng-init was "ng-init="topRadios()";
I dont know if I need to use ng-value instead of value or if I need to add some logic to my controller or what.
Any help on this?
You can just recall the function like so:
<button ng-click="triggerTable()" type="button">Refresh</button>
And the corresponding function:
$scope.triggerTable = function() {
$scope.topTable = "topCategory";
}
Example
Related
I'm actually trying to disable a pair of radio buttons on the click of a button in my angularjs application.
Code Snippet of radio buttons is provided below here:
<div class="col-xs-4 btn-group" id="challenge-radio-btn">
<label class="radio-inline">
<input type="radio" ng-model="trigger" ng-value=false
name="{{path.id}} notChallengeTriggr"
ng-change = "onChange(x,y,z,w,a)"
ng-disabled="campaign.editnotscheduled || ischallengeTrigger"
checked> No
</label>
<label class="radio-inline">
<input type="radio" ng-model="trigger" ng-value=true
name="{{path.id}} challengeTriggr"
ng-change = "onChange(x,y,z,w,a)"
ng-disabled="campaign.editnotscheduled || ischallengeTrigger"> Yes
</label>
</div>
On click of the button, I have even tried printing the value of the expression which is getting evaluated inside of ng-disabled. On every click of this button, the value becomes true(as I have written js code-behind to make this true). Even the value of the ng-disabled expression is true, the radio buttons are not getting disabled.
On debugging, I had found a particular scenario where it wasn't working. Once I click on a specific dropdown in my application, after that if I come back & click on edit button to check whether these radio buttons are disabled or not. At that time, radio buttons are not disabled even though the ng-disabled expression value is true.
I think the logic of OR is causing the problem.
ng-disabled="campaign.editnotscheduled || ischallengeTrigger" checked>
ng-disabled="editnotscheduled || ischallengeTrigger">
If either of them is false.then your button should get disabled.
I have a set of radio buttons that when I click them they show different content.
<div class="radio" ng-init="topRadios()">
<input type="radio" ng-model="topTable" value="topCategory" ng-change="updateTotals('topCategory')">TY 30 Categories</label>
<input type="radio" ng-model="topTable" value="topSupplier" ng-change="updateTotals('topSupplier')">TY Top 10 Suppliers</label>
<input type="radio" ng-model="topTable" value="topBrand" ng-change="updateTotals('topBrand')">TY Top 10 Brands</label>
</div>
And I have a button to apply some filters to the information that is displayed depending o the radio button selection.
<button class="goButton btn btn-xs" ng-class="css" ng-click="go()" ng-disabled="isClicked"> Apply </button>
When I click on the third button to see that info for example and then the Apply button with some filters the page refresh and what I want is that when the info and radio buttons displayed the first radio button is selected.
Can anyone help me please?
sounds like what you want to do is set an initial value for your radio input's ng-model in your controller:
$scope.topTable = 'topCategory';
you probably also want to reset the input's value in your go function after you apply your filtering with that same code snippet.
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
I have a variable called category that must change its value according to the selected radio button. The problem is that I do not get that at the click of a radio button or another, the value will change instantly.
This is the code I have:
<form>
<input type="radio" name="category" value="doctor" /> Doctor
<input type="radio" name="category" value="police" checked /> Policia
</form>
var category = $('[name="category"]:checked').val();
I need you to automatically change the value of the variable category when you click the radio buttons.
Attach an event handler to the change event:
$(':radio[name="category"]').change(function() {
var category = $(this).filter(':checked').val();
});
You need to change the value of category every time a user changes the selected radio button. Therefore you will need an event to trigger when the user clicks on a radio. You can check out the FIDDLE
var category = null;
$("input[name='category']").click(function() {
category = this.value;
});
I think you need simply something like this:
var category;
$('radio[name="category"]').click(function(){
category=this.value;
});
var category;
$(':radio[name="category"]').change(function() {
category=this.value;
});
And this is a jsfiddle.net demo.
You shouldn't give the same ID for more than one element, you should use class instead like this :
<form>
Option 1<input type="radio" name="opt" class="radio" value="Option 1">
Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>
instead of :
<form>
Option 1<input type="radio" name="opt" id="radio" value="Option 1">
Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>
and your code still the same and it should work fine :)
Instead of using category variable use $('[name="category"]:checked').val() wherever you want the value of the checked radio button. Otherwise you can make use of change or click event to set the checked radio buttons value into category variable.
utilize the .change() in order to capture the change event for a radio button.
I need some help.
I have program that changes table values based on user input in radio box
similar to this page:
clicky
But the problem is I want users to select the radio input only once; if they select another
radio then values of tables get messed up.
So what I want to know is how can I make an alert box when user selects the radio input twice?
Similar to this website clicky try clicking radio button twice and alert popsup.
Please can anyone help?
It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!
For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.
<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option
<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option
var selectedValues = {};
function radioClicked(rb) {
if (selectedValues[rb.name] === undefined) {
selectedValues[rb.name] = rb.value;
doTableProcessing();
}
else {
alert("You can't change the selected values");
document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
}
}