Develop Reference

ng-disabled not evaluating every time on button click

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.

Get value of radio button group in route after form submit?

I have a radio button group on my page which is within a form. When the form is submitted, I would like to retrieve the values of the form and save them to my database. It seems that the value for the radio button group is radiobtngrp: 'on' but I don't know which one of the radio buttons is on. How do radio buttons work on the submit of a form?
Here is my HTML code for the radio buttons:
<label for="q-<%= question.id %>">
<input id="q-<%= question.id %>-r-i" type="radio" class="form-control" name="radiobtn">
<img src="/images/a.png">
</label>
I have multiple radio buttons which are added through a loop in my ejs file.
My submit button looks like this:
<button class="btn btn-lg btn-signin btn-yellow" type="submit">Submit</button>
Now in my route, if I try something like this:
console.log(req.body.radiobtn);
I see this in the console:
radiobtn: 'on'
Why is this? And how can I get the actual radio button which was clicked?
Thanks in advance!

Give each radio button in a group both name and value attributes.
The name attribute value is used as the key when submitting a form, with the value of the key taken from the value attribute of the selected radio button.
All buttons in the same group share the same name attribute value.
Here a quick HTML demo: it's not supposed to do anything except show the query string in the location bar when you hit submit:
<form method="get">
<input type="radio" name="myRadio" value="1">( value 1)<br>
<input type="radio" name="myRadio" value="2">( value 2)<br>
<input type="radio" name="myRadio" value="3">( value 3)<br>
<input type="submit" value="submit">
</form>
The default value of the value attribute is the string "on". Hence "on" is sent as the value of the radio group named "radiobtn" when the selected button is missing a value attribute. (Ref. HTML standard)

Double radio button selection bug AngularJs

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

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.

Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});

if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

JQuery Select a radio button (onclick)

I have a function using jquery that updates a form when an image is click.
I need to add to that function so that a specified radio button is selected.
How can I select a radio button using jquery please?
UPDATE:
I'll explain further...I have overlayed an image and hid the radio button...so what the user clicks on an image it will check the selected radio.
Here's how each radio looks like:
<label style="display: inline; " for="select_theme_a">
<img src="images/icons/theme1.png" />
<input checked="checked" class="select_control" id="select_theme_a" name="select_theme" type="radio" value="a" onclick="return submitForm();" style="display:none" />
</label>
There's 4 radio buttons .. 4 different images to click on.
Hope this helps

How can I select a radio button using jquery please?
You can use attr method like this:
$('#radio-id').attr('checked', true);

If radio element is inside same parent element as image than you can use this piece of code inside function that handles image click event:
$(this).parent().find(":radio").attr('checked', true);