I have a student registration form. I put one field named favorite color having three check box blue, green, red. user can check multiple check boxes.
now I require that when user check check boxes its values should be add in array list using ng-model.
Can Any one help me?
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center">
<i class="fa fa-bullseye bigicon"></i>
</span>
<div class="col-md-8">
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor." value="Red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Green
</label>
</div>
</div>
</div>
above is my code:
and I want value as {favouritecolor:[red,blue,green]}
Try like this
<input type="checkbox" name="favoriteColors"
ng-click="addToList('Red')" value="Red">
and in controller:
$scope.addToList = function(color){
var index = $scope.data.favouritecolor.indexOf(color);
if(index > -1)
$scope.data.favouritecolor.splice(index,1);
else
$scope.data.favouritecolor.splice(color,index,0);
}
You can call a function on checkbox click and get the values.
JS:
function MyCtrl($scope) {
$scope.colorArray=[];
$scope.getChecked=function(color){
var index=$scope.colorArray.indexOf(color);
if(index>-1)
$scope.colorArray.splice(index,1);
else
$scope.colorArray.push(color);
$scope.temp={"favouritecolor":$scope.colorArray};
console.log($scope.temp);
}
}
HTML:
<div ng-controller="MyCtrl">
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i
class="fa fa-bullseye bigicon"></i></span>
<div class="col-md-8">
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" value="Red" ng-click="getChecked('Red')"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Blue')"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Green')"> Green
</label>
</div>
</div>
</div>
</div>
JS Fiddle:http://jsfiddle.net/u2c9uLmv/1/
This is one way usually used for ng-model with turning array to object then adding extra key selected which in-turn used as boolean and you can filter out data.
angular.module('app', []).controller('formController', FormController);
function FormController($scope, $filter) {
$scope.list = ['blue', 'red', 'yellow'];
$scope.colors = [];
angular.forEach($scope.list, function(data) {
$scope.colors.push({
color: data,
selected: false
});
});
$scope.showSelected = function() {
var selectedColors = $filter('filter')($scope.colors, {
selected: true
}, true);
var favouriteColors = [];
angular.forEach(selectedColors, function(data) {
favouriteColors.push(data.color);
});
console.log(favouriteColors);
};
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="container" data-ng-controller="formController">
<div class="row">
<div class="col-sm-12">
<form class="form-horizontal" ng-submit="showSelected()">
<div class="checkbox" data-ng-repeat="data in colors">
<label>
<input type="checkbox" data-ng-value="data.color" data-ng-model="data.selected" />{{data.color}}
</label>
</div>
<div class="form-group">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
Related
I have a form with the field "age". There are two possible scenarios: either I check the "unknow" box and then you can't enter/select an age (in other words, this option should be disabled) or the box is not checked, and then you can enter the age. However, I can't do the first scenario at all. Here is my code:
<div class="row mb-3">
<label for="age" class="col-sm-2 col-form-label"> Age </label>
<div class="col-sm-10">
<input type="number"class="col-sm-3 col-form-control" min="0" max="120" step="1" id="age">
</div>
<div class="row mb-3">
<label class="col-sm-1 col-form-check-label"> Unknow </label>
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something">
</div>
</div>
Is it possible to do this with vue.js? Thank you in advance!!
Here is your first scenario.
const checkBox = document.getElementById('check1')
const input = document.getElementById('age')
checkBox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
input.disabled = true
} else {
input.disabled = false
}
})
<div class="row mb-3">
<label for="age" class="col-sm-2 col-form-label"> Age </label>
<div class="col-sm-10">
<input type="number" class="col-sm-3 col-form-control" min="0" max="120" step="1" id="age">
</div>
<div class="row mb-3">
<label class="col-sm-1 col-form-check-label"> Unknow </label>
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something">
</div>
</div>
You can do with both. The thing is, you should understand how it works in plain JavaScript first before jumping to any kind of JavaScript framework, hope that makes sense
const app = new Vue({
el: "#app",
data() {
return {
checkedStatus: false,
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row mb-3" id="app">
<label for="age" class="col-sm-2 col-form-label"> Age </label>
<div class="col-sm-10">
<input type="number" class="col-sm-3 col-form-control" min="0" max="120" step="1" id="age" :disabled="checkedStatus">
</div>
<div class="row mb-3">
<label class="col-sm-1 col-form-check-label"> Unknow </label>
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" #change="checkedStatus=!checkedStatus">
</div>
</div>
So I want to validate if the email submitted is valid. Tried to make it work with bootstrap because I have to use it.
Here's the codepen:
https://codepen.io/yytimo/pen/ExWLbLd
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
Found a working solution with some javascript tricks. Try this
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
var email = document.getElementById('validationCustomEmail');
email.oninput = () => {
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(email.value)){
email.setCustomValidity("Invalid field.");
email.classList.add('is-invalid');
} else {
email.classList.remove('is-invalid');
email.setCustomValidity("")
}
}
}
)();
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom01"
value="Mark"
required
/>
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom02"
value="Otto"
required
/>
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom03" required />
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom05" required />
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Use input with type:email can help you.
I am trying to conditionally add the class "closed-3" to all the children "input" elements of an ancestor. The ancestor should contain the classes ".summon-next-element.on-sub-sub-level". However, I get no effect - no class added, no error in the console, nothing. Here is the jQuery:
$('.summon-next-element.on-sub-sub-level').each(function() {
if ($(this).find("input").is(":checked")) {
$(this).nextAll(".summoned-element").first().find("input").addClass("opened-3").removeClass("closed-3");
} else {
$(this).nextAll(".summoned-element").first().find("input").addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
Thank you so much for your help!
It is also necessary to wrap your logic in the radio button selection event, according to which the reduced assignment / deletion of classes will take place:
$(this).on('click', function() { ... }
In your code, there was also an incorrect class reference.
$('div').find('input[type=radio]').each(function() {
$(this).on('click', function() {
$('input[type=radio]').addClass("closed-3").removeClass("opened-3");
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
Problem is that you are not looping over each of the inputs, so when you check if the input is checked, it will always select the first inside .on-sub-sub-level.
Try with:
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
Demo
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
Still learning Bootstrap and I am trying to create an input form with check boxes where on selection of any of the check boxes a drop down appears (for that particular checkbox). The issue that I am running into is that whenever a drop down appears it shifts the other check boxes around. I would like to prevent it so that the check boxes and are fixed in place and do not shift around when the drop down appears.
Here is the HTML snippet:
<div class="container-fixed">
<div class="row">
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="cheese" >cheese
<div class="form-group"id="cheese">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Broccoli" >Broccoli
<div class="form-group"id="Broccoli">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Peppers" >Peppers
<div class="form-group"id="Peppers">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
Here is the jQuery:
$(document).ready(function() {
$( "input" ).click( function() {
var show = "#" + this.value
$( show ).show();
})
})
You have to use the visibility:hidden css property to hide the select boxes. This property will hide the element but it will have its space on the page.
for more description : http://www.w3schools.com/cssref/pr_class_visibility.asp
So for the above code you can do changes like this :
HTML :
<div class = "container-fixed">
<div class = "row">
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "cheese" >cheese
<div class = "form-group select-box" id = "cheese">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "Broccoli" >Broccoli
<div class = "form-group select-box" id = "Broccoli">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "Peppers" >Peppers
<div class = "form-group select-box" id = "Peppers">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
CSS :
.select-box{
visibility: hidden;
}
jQuery :
$(document).ready(function() {
$( "input[type='checkbox']" ).click( function() {
var show = this.value
if ($(this).prop('checked')){
$( "#"+show ).css('visibility', 'visible');
}else{
$( "#"+show ).css('visibility', 'hidden');
}
})
})
JSFIDDLE : https://jsfiddle.net/8d1fnb5z/
I would look to add a new .row below the current row of checkboxes. This works as long as you can fit your checkboxes and dropdowns on one row each. Then make sure that your col classes match. So in this example i'm using .col-xs-4
http://codepen.io/partypete25/pen/VmgPVp
HTML:
<div class="container-fixed">
<div class="row">
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="cheese" >cheese
</label>
</div>
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="Broccoli" >Broccoli
</label>
</div>
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="Peppers" >Peppers
</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group hide" id="cheese">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group hide" id="Broccoli">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group hide" id="Peppers">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
</div>
JAVASCRIPT:
$("input").change(function() {
var chk = "#" + this.value;
if ($(this).is(':checked')) {
$(chk).removeClass('hide');
} else {
$(chk).addClass('hide');
}
});
need some help on angular i have no knowledge on, but i have a work to do ^^' . My problem is when i write into my inputs i can't get the ng-model return and get a scope error telling $scope.newemployee is undefined(corrected).
New problem my table 'List' stay empty like my object employee
<!DOCTYPE html>
<html ng-app="employe">
<head>
<meta charset="utf-8" />
<title>
List of employe
</title>
<meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
<link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./files/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="./files/code.js">
</script>
</head>
<body>
<div ng-controller="FormController as FormCtrl">
<button ng-click="FormCtrl.setShow(2)">Add new employee</button>
<form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
{{newemployee}}
<h2>
Add/Edit employee
</h2><!-- NOM -->
<div class="form-group">
<label for="name" class="col-xs-5 control-label">Name</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
</div>
</div><!-- AGE -->
<div class="form-group">
<label for="age" class="col-xs-5 control-label">Age</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
</div>
</div><!-- NICKNAME -->
<div class="form-group">
<label for="nickname" class="col-xs-5 control-label">Nickname</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
</div>
</div><!-- EMPLOYEE -->
<div class="form-group">
<label for="employee" class="col-xs-5 control-label">Employee</label>
<div class="col-xs-2">
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
</div>
</div><!-- JOB -->
<div class="form-group">
<label for="job" class="col-xs-5 control-label">Job</label>
<div class="col-xs-2">
<select ng-model:"newemployee.job" class="form-control">
<option>
Founder
</option>
<option>
Market chef
</option>
<option>
Stage
</option>
</select>
</div>
</div><!-- ANNEE -->
<div class="form-group">
<label for="years" class="col-xs-5 control-label">Years</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
</div>
</div><!-- BUTTON -->
<div class="center">
<button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
</div>
</form>
</div>
</body>
Here angularjs code
(function () {
var app = angular.module('employe', []);
app.controller("FormController", function () {
this.Edit = 1;
this.isShow = function(checkEdit){
return this.Edit == checkEdit;
};
this.setShow = function(setShow){
return this.Edit = setShow ;
};
console.log(this.Edit);
});
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/[];
$scope.addEmployee = function(){
$scope.list.push({
name: $scope.newemployee.name,
age : parseInt($scope.newemployee.age),
nickname : $scope.newemployee.nickname,
job : $scope.newemployee.job ,
years : parseInt($scope.newemployee.years),
salarie : $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
})();
You should probably initialize the newemployee object inside ListCtrl as follows
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/ [];
$scope.newemployee = {};
$scope.addEmployee = function() {
$scope.list.push({
name: $scope.newemployee.name,
age: parseInt($scope.newemployee.age),
nickname: $scope.newemployee.nickname,
job: $scope.newemployee.job,
years: parseInt($scope.newemployee.years),
salarie: $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
Sample input tag
<input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />
You have to link the input fields to the properties you want to set. You can do this with ng-model like this:
<input type="texte" class="form-control" ng-required="true" name="name" ng-model="$scope.newemployee.name" />