Iam running foreach loop above the radio button but unfortunately i could not check any of radio button.Here is my view
<div class="tab-pane" id="tab3">
<div class="form-body">
<div class="row">
<div class="col-md-12">
<h3 class="form-section">Qualification Factor</h3>
<div class="row" data-bind="foreach: leadqualificlist">
//Here is my foreach loop
<div class="col-md-6">
<div class="form-group">
<div class="radio-list radio-list-padding">
<label class="radio-inline">
<input type="radio" name="serious" value="0" data-bind="checked:Scoreschk, attr: { name: 'grp' + $data.Negativescore}" />
Negative
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Iam having list in leadqualificlist observable array.
Radio buttons behave differently than checkboxes, see documentation:
For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute or the value specified by the checkedValue parameter. <...> When the user changes which radio button is selected, KO will set your model property to equal the value of the selected radio button.
So, having that said, you cannot set different names for your checkboxex (using attr binding), but should set value in binding, like this:
...
<input type="radio" name="serious" data-bind="value: Scoreschk, checked:$parent.selectedScoreCheck" />
...
Now your view model should look like this:
function ViewModel() {
var self = this;
self.leadqualificlist = ko.observableArray([new Qualification(0, 5),
new Qualification(1, 2),
new Qualification(2, 1)]);
self.selectedScoreCheck = ko.observable("2"); // Note here must be string!
}
Where Qualification is:
function Qualification(scoreCheck, negativeScore) {
this.Scoreschk = scoreCheck;
this.Negativescore = negativeScore;
}
See demo.
Related
I have a page that when I change radio boxes it shows different content.
It works when I click radio boxes. But in an edit form, I would like the second radio option to be selected and content of second radio option to be shown on page load. The content is not shown when I populate 'checked' on the radio as shown in the demo.
Demo.
var aTag = document.querySelector("a.mylink");
aTag.addEventListener("click", function(e) {
e.preventDefault();
var query = document.querySelector("input[data-for='" + e.currentTarget.id + "']").value;
window.open(e.currentTarget.href + "?query=" + query, "_blank");
}, false);
// radio element click event handler
var radioClickHandler = function() {
var first = document.querySelector('.first');
var second = document.querySelector('.second');
second.classList.add('hidden');
// show/hide required elements depending on which radio element was clicked.
if (this.value == 'product') {
first.classList.remove('hidden');
second.classList.add('hidden');
}
if (this.value == 'keyword') {
first.classList.add('hidden');
second.classList.remove('hidden');
}
}
// Get All Radio Elements
var radios = document.querySelectorAll('[type=radio]');
// Apply click event
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', radioClickHandler);
}
// Apply Default
radioClickHandler.apply(radios[0]);
.hidden {
display: none;
}
<div class="col-md-8 offset-md-2">
<div class="m-form__group form-group row">
<div class="col-9">
<div class="m-radio-inline mt-3 type_selector">
<label class="m-radio">
<input type="radio" name="type" value="product" data-id="specific_product"> First
<span></span>
</label>
<label class="m-radio">
<input type="radio" name="type" value="keyword" required="" data-id="search_term" checked> Second
<span></span>
</label>
</div>
</div>
</div>
<style>
/*hides element*/
</style>
<div class="first">
<label for="" class="mt-2 mb-2"><strong>First Content</strong></label>
<select class="form-control m-select2 select2-hidden-accessible" id="m_select2_1" name="product_id" data-select2-id="m_select2_1" tabindex="-1" aria-hidden="true">
<option value="" data-select2-id="" disabled selected>Blabla
</option>
</select>
</div>
<div class="second">
<label for="exampleInputEmail1" class="pt-3"><strong>Second Content</strong></label>
<div class="row mt-1 ">
<div class="col-xl-8">
<input type="text" class="form-control m-input m-input--solid" data-for="search_term" name="{{$default_template->notification_toggle_id}}_search_term" value="" id="m_autosize_1" placeholder="blabla">
</div>
<div class="col-xl-4 align-self-center">
First Content
<script>
</script>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
I tried several things like. But I couldn't succeed.
window.onload = radioClickHandler;
After
window.onload = function() {
The whole javascript snippet
};
Also this
var radios = document.querySelectorAll('.type_selector .m-radio input[type=radio]');
Working fiddle.
You could simply invoke the click event using :
radios[1].click();
Edit:
The problem happens since you're attaching the click event to all the radio button in the current document in the following line :
var radios = document.querySelectorAll('[type=radio]');
To fix this issue you need to encapsulate the first & second radios so you could attach the click to them separately :
<div id="first-second" class="m-form__group form-group row">
Then attach the event just to them like :
var radios = document.querySelectorAll('#first-second [type=radio]');
The onchange or onclick event does not fire when the selected option of the select object is changed programmatically or you fill the input value programmatically. So you do require to trigger that onchange or onclick after changing it in window.onload or init function.
To trigger the event use How to trigger event in JavaScript?
EDIT: I think it is the addition of the other radio buttons are being added to the same group so second is not your second radio but 5th so this will now work
radioClickHandler.apply(radios[5]);
http://jsfiddle.net/wy9xbhdo/
I have a form. Whenever a user hits the enter key on a text input, or when they tap or click on a radio button, I want to be able to set the focus to the next
"formItem" div.
The structure of my form is set up like this:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
Every input has a tabindex, so I was considering using this somehow, but once a user has made a selection I do not wish to necessarily just move the focus to the next tabindex because it may be in the same radio group. I wish to set the focus to the next "formItem" div.
Please see the following Plunkr for a larger code example:
http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
You don't need tab index, you can use the order of the tab items inside the form. I would make a myFormItem directive like this:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
and you need to add the my-form-item attribute to each .formItem (btw, you should probably use kebab-case for classes)
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).
I have an array of applications. A subset of that array is pushed into another array.
$scope.applicant.selectedApps = [];
$scope.applicant.applications = applications;
angular.forEach(applications, function (application) {
if(application.isSelected){
$scope.applicant.selectedApps .push(application);
}
}
I know have 2 ng-repeats that loop over those arrays:
<div class="row">
<div class="form-group col-sm-10 col-sm-offset-1">
<div class="radio">
<label>
<input type="radio" name="intent" ng-model="applicant.intent" value="Y" required />YES
</label>
</div>
<div class="row" ng-show="applicant.intent == 'Y'">
<div class="col-xs-11 col-xs-offset-1">
<div class="row" ng-repeat="app in applicant.selectedApps">
<div class="col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
<input id="Prog{{app.appid}}" name="Progs" type="checkbox" ng-model="app.isSelected" ng-change="appChange(app)" ng-required="applicant.intent == 'Y'" />
{{app.Objective}} - {{app.Name}} - {{app.Description}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-10 col-sm-offset-1">
<div class="radio">
<label>
<input type="radio" name="intent" ng-model="applicant.intent" value="N" required />NO
</label>
</div>
<div class="row" ng-show="applicant.intent == 'N'">
<div class="col-xs-11 col-xs-offset-1">
<div class="row" ng-repeat="dApp in applicant.applications">
<div class="col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
<input id="dProg{{dApp.appid}}" name="dProgs" type="checkbox" ng-model="dApp.isSelected" ng-change="dProgChange(dApp)" ng-required="applicant.intent == 'N' && appCount <= 0" />
{{dApp.Objective}} - {{dApp.Name}} - {{dApp.Description}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the two change functions are as followed:
$scope.dProgChange = function (app) {
if (app.isSelected) {
$scope.appCount++;
} else {
$scope.appCount--;
}
};
$scope.ProgChange = function (app) {
if (app.isSelected) {
$scope.selectedAppCount++;
} else {
$scope.selectedAppCount--;
}
};
What i observe is that every app that was initializes with "isSelected" = false will be set to undefined as soon as the radio button is switched to "NO". When switched back to "YES" is selected switches back to false.
This causes the dProgChange to trigger every time the Radio button value changes.
I can't figure out why the "isSelected" switches to undefined.
UPDATE
While trying to create a simplified example, i noticed that the problem occurs as soon as the checkbox is required.
In the plunker listed bellow, the model value for the checkbox is set to undefined as soon as the checkbox is unchecked. That seems to me the same issue i am having.
http://plnkr.co/edit/SBsdew8tzWdNgNOf6W1c?p=info
This is the way AngularJS (ng-model and NgModelController) is supposed to work.
NgModelController has two properties: $viewValue (value entered by user) and $modelValue (value bound to your model). When the value entered by the user fails validation, NgModelController sets the model to undefined.
In AngularJS 1.3, they added the ng-model-options directive. It lets you configure how/when the model gets updated. You can use the allowInvalid option to prevent your model from being set to undefined:
<input type="checkbox"
ng-model="myModel.value"
ng-model-options="{allowInvalid: true}">
So, I am going to add to this answer for future reference. This applies to <input> also. If you have something such as
<input ng-model="speaker.vrange" ng-blur= "updateSpkV()" type="number" data-placement="right" min ="0" max="10"/>
then you will have an invalid input if you set the value to something outside of the range and the model variable will be set to undefined. This became an issue with me when I directly entered an out of bound value rather than using up/down arrows for adjusting a value.
Okay so here is my setup i have the following array:
answers = [answer1, answer2]
with these i do the following:
<form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
<div class="col-xs-1" style="width: 1%">
<div class="radio">
<label class="i-checks">
<input type="radio" name="a" ng-model="answer.is_correct">
<i></i>
</label>
</div>
</div>
<div class="col-xs-11">
<input type="text" ng-model="answer.answer" class="form-control" placeholder="Svar">
</div>
</div>
</form>
Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true
However what happens right now is that if i click the first and then second both values have is_correct = true
So what can i do?
Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:
<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">
If you really need to set a flag you can easily achieve that with a watcher:
$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
component.question.answers.forEach(function(answer) {
answer.is_correct = answer === correctAnswer ? true : false;
});
});