Multiple radio input checked - javascript

My problem seems quite simple but i can't see what's going wrong.
I am just trying to have a simple multiple-choice form with only one choice possible, with the help of radio inputs.
I am using a loop with Mustache.js and I believe it prevents it from working, because I can select every input at the same time
Here's the code
<ul class="list-group mongroupe">{{#liens}}<form>
<li class="list-group-item"><div onclick="sessionStorage['idpatient']='{{patient}}'">
<input type="radio" name="listemp" value={{patient}}/><h2> {{patient}} </h2> </div>
</li></form>
{{/liens}}
</ul>
Even though the inputs have the same name (others questions take this for a solution).
I'd thankful for a hint on how to solve this.

Move the form outside the ul or at least outside the #liens block. Your rendered HTML probably has one form for each radio button which means each radio is alone in it's own group.

Related

Finding the number of checked check-boxes in a form gives double the actual count

I'm trying to count the number of contact check-boxes checked/selected in a form.
What could be wrong with the below code snippet which actually gives double the count.
HTML:
<div ng-hide ="onOff">
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}">
<label class="atl-check-box-label">
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()">
<span class="fntIcons appFtIcns"></span>
</label>
</span>
</div>
<div ng-hide ="!onOff">
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}">
<label class="atl-check-box-label">
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()">
<span class="fntIcons appFtIcns"></span>
</label>
</span>
</div>
The HTML form is a huge one and it has both <span class="ctCheckBox" .. and <input type="checkbox" class="atl-check-box" .. in other places too. However, only the above HTML code is displayed on the application view.
JS:
$scope.selectedContactsCount = angular.element('.ctCheckBox input:checked').length;
alert('1st alert: ' +$('input:checkbox:checked').length);
alert('2nd alert: ' +$('.atl-check-box input:checked').length);
All of the above 3 JS statements yield the wrong number of selected check-boxes:
1st one gives double the actual selected check box count
For 2nd, count is 27
For 3rd, count is 0
Ex: If the only 2 contacts which are being displayed on the application view are being selected, then 4 is shown as the count of the number of selected contacts, if 3 contacts are selected, then 6 is shown as the count of the number of selected contacts and so on.
Am I missing something?
Any help is greatly appreciated, thanks in advance!
I've found the solution to my problem. The real reason why the count was getting doubled was due to the usage of ng-hide, instead of ng-if, which would show the selected contacts in the DOM in spite of being hidden or displayed and resulting in angular.element('.ctCheckBox input:checked').length finding 2 occurrences (a duplicate) of the same checkbox.
ng-if has solved this problem now as checkboxes get rendered conditionally on DOM, however, there is some other change in the application's initial loading of the list of contacts behaviour which will be looked into.

Several radio button groups in nested ng-repeat, but only last group shows the value

I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).
For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.
I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).
Does anyone have any ideas? Thanks!
EDIT
Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/
I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.
UPDATE
I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.
I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.
Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM
I created the app on a single page for simplicity.
Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT
I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX
I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).
To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.
Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.

Only one checked checkbox allowed in a grid

Is it possible to have a CheckboxColumn in a grid panel that can be checked on only one row at a time ?
I've tried Googling what I'm looking for and I'm not finding much.
Do I need to do something at the store level and at the grid level ? I'm halfway through coding a logic that does it using the checkchange event, but I wondered if I'm writing useless code :)
Thank you.
Your best option as suggested in the comments is to use radio buttons.
The key is to give them all the same name. For example:
<form>
<input type="radio" name="firstname" id="Fred">
<input type="radio" name="firstname" id="Joe">
</form>
Then, when one of these radio buttons is selected, any other radio button with the same name will be unselected.

How to work with checkboxes generated from ezMark?

I'm using ezMark library in my website alongwith PHP, Smarty, jQuery, etc. Here on one of the webpages I want to disable few checkboxes depending on some condition. After that there is one parent check box, upon selection of which all the checkboxes which are not disabled should get checked and should work vice-versa on deselcting the parent check box. Also after checking the parent checkbox if I uncheck any one of the selected checkboxes(which are not disabled) the parent checkbox should also get unchecked. I tried alot to achieve this by regular code of checking and uncheking the checkboxes (.attr('checked','checked') and .removeAttr('checked'); respectively) but doesn't work in this situation due to ezMark library. Now I'm using following code to check and uncheck the checkboxes as follows:
Code for parent check box:
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
The smarty code for multiple checkboxes creation:
{section name=tests loop=$all_tests}
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="" {if $all_tests[tests].is_test_lock!=1 && $all_tests[tests].test_assign_to_package=='no'} {else} disabled {/if}>
<label>{$all_tests[tests].test_name}</label>
</p>
{/section}
The jQuery code for selecting and deselectiong the checkboxes upon parent checkbox:
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
});
When I look into Firbug Element Inspector I'm getting the different HTML created for the child checkboxes as follows:
<p class="custom-form">
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name=""></input></div>
<label>N1P: Gravitation</label>
</p>
I'm not getting from where this <div> tag is coming. So in order to check and uncheck all the child checkboxes on selection of paren checkbox I'd written above logic. The normal logic is not getting worked due to this div tag and ezMark library. With the current code all the child checkboxes are getting selected including the disabled ones upon selecting the parent checkbox and upon unchecking the parent checkbox all the child checkboxes get unselected. Can you help by showing how to achieve the required functionality of selection and deselection of child checkboxes in this scenario? Thanks in advance.
The jQuery.ezMark generated structure is not really a problem to achieve what you want to. I wrote this jsFiddle to show you a way to proceed based on css classes to identify parent (.l0) and children (.l1).
I manually disabled some checkboxes for sample, but you can use your condition to disabled them.
Hope this can help you ;)

How to add hidden filed to form with Angular.js

I have several divs in my html.
<div ng-click="remeber_gift({{gift.id}})">div1</div>
<div ng-click="remeber_gift({{gift.id}})">div2</div>
<div ng-click="remeber_gift({{gift.id}})">div3</div>
I want to add hidden filed to clicked div with angular.js and remove all other hidden fields from other divs.
Is this possible at all to do with Angular.js ?
In jquery simple .append is enough.
You might be able to.. but it wouldn't be very clear or succinct Angular code. You want to avoid DOM manipulation like this as much as you can with Angular. If you need to have a hidden field with a gift id, you could have just one in your view and ng-bind it to a variable in your scope.
ex <input type="hidden" ng-bind="saved_gift" />
Then your remeber_gift function could just update that saved_gift to the selected gift.id.

Categories