I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour?
My .JS code:
$scope.onCheckBoxSelected=function(){
var flag=false;
for(var key in selectedOptions){
console.log('Key -' +key +' val- '+selectedOptions[key]);
if(selectedOptions[key]){
flag=true;
}
}
if(!flag){
selectedOptions=undefined;
}
};
below is my html code :
<div class="grid">
<div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
<div class="col flex-2">
</div>
<div class="col flex-5">
<div style="padding-top: 2px">
<input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
</input>
</div>
</div>
</div>
You can keep it simpler, without the need of the ngChange event.
<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>
It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.
<ng-form name="myForm">
<span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
<br />
<!-- your checkbox values will be in "choices" -->
<p ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
</label>
</p>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
See this fiddle - note that it uses underscore.js. Also, this question may help.
Related
I have a form with multiple checkboxes and each checkbox as an input field associated with it that'll activate once you check the checkbox.
I've got the frontend working just fine, but I was wondering how can I read in my PHP which checkboxes were checked along with their respective input fields (and some have a radio button too in addition to the input field)
Here's what each individual checkbox in my form looks like:
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
I haven't wrapped my head around the PHP yet but previously to read multiple checkboxes I put them all in an array in the name field and read that array in PHP. However, that was without the added complication of each checkbox having input field.
Does anyone have any idea how to do this?
You want to use an associative array for both the inputs and the checkboxes.
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
<input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
</div>
</div>
</div>
<!-- Option 1 ends -->
For option 2 use items[2][chosen] and items[2][quantity], etc.
Note that must specify the index and can't use []. Otherwise, the index of quantity will not match the chosen item.
In php you can loop through the items and ignore the items that aren't chosen.
foreach ($_POST['items'] as $item) {
if (!isset($item['chosen'])) continue; // Skip items that aren't chosen.
echo $item['quantity'] . ' ' . $item['chosen'] . "\n";
}
Stackblitz
I am trying to find the id associated with the name I select using the radio button. Any help?
<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
<div class="row">
<div class="col-12" style="border: 1px solid red">
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name" [(ngModel)]='selected'>
</div>
</div>
<hr />
<button type="submit">SAVE</button>
</div>
</form>
try to declare a property and set the value on model change event
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name"
ngModel (ngModelChange)="selectedValue = x">
</div>
demo 🚀🚀
I am using the below code to check my checkbox in handlebars.
<fieldset>
<div class="control-group">
<div class="control-label">{{#t "display_creators_name"}}Display Creator's name{{/t}}</div>
<div class="controls">
<label class="checkbox" for="creators_name">
{{checkbox "creators_name"
checked=creators_name}}
{{#t "allow_creators_name"}}{{/t}}
</label>
</div>
</div>
</fieldset>
But the checkbox is not checked.
Can someone please help me for the same.
how can i make checkbox disable when i choose an item from comboboxes. forexample if i choose "ABONE", angular will make abone checkbox disable.
Note(example): DefinitionType : ABONE
<div class="row">
<div class="form-group">
<label class="control-label col-md-2">Tanım Tipi<sup>*</sup></label>
<div class="col-md-3">
<select class="form-control" placeholder="Tanım Tipi" ng-options="field.value for field in DefinitionTypes" ng-model="DefinitionType" required></select>
</div>
</div>
</div><br />
Ekstra Tanım Tipi
<div class="checkboxinsameline" ng-repeat="item in DefinitionTypes">
<label>
<input type="checkbox" name="item.value" ng-click="DefinitionTypesChecked(item.id)" > {{item.value}}
</label>
</div>
</div>
</div>
</div><br />
You will have to add this attribute on your input :
ng-disabled="item.value == DefinitionType.value"
This will disable your input when the value of your input will be equals to the value of your select model.
Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks
function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).
Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/
I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.