Change variables based on radio selection in Angulajs - javascript

I am building a calculator in angularjs as a wordpress php plugin. Passing parameters as variables via a shortcode.
I have a jquery ui-slider with min, max and step values set by passed params:
<div ui-slider="{range: 'min'}" min="{$this->weight_minimum}"
max="{$this->weight_maximum}" step="{$this->weight_increment}"
ng-model="weight">
</div>
I also added two radio buttons after the slider:
<div class="user-selection">
<label class="radio-container">{{ "Pounds" | translate }}
<input type="radio" checked="checked" name="radio"
ng-model="selection" value="lbs">
<span class="checkmark"></span>
</label>
<label class="radio-container">{{ "Kilograms" | translate }}
<input type="radio" name="radio" ng-model="selection" value="kg">
<span class="checkmark"></span>
</label>
</div>
How can I change min/max values of the slider based on radio selection? I tried using ng-if but that is for showing/hiding html. I also tried adding an if statement in the app.controller with no success.
if ($scope.selection == 'lbs') {
weight_maximum = $this->weight_maximum;
} else if ($scope.selection == 'kg') {
weight_maximum = $this->weight_maximum / 2.2;
}

Use ng-change event example in the plunker
Code : html
<div class="user-selection">
<label class="radio-container"> Pounds
<input type="radio" checked="checked" name="radio" ng-change="changUnit()" ng-model="selection" value="lbs">
<span class="checkmark"></span>
</label>
<label class="radio-container"> Kilograms
<input type="radio" name="radio" ng-model="selection" value="kg" ng-change="changUnit()">
<span class="checkmark"></span>
</label>
</div>
<div>Min : {{weight_minimum}}</div>
<div>Max : {{weight_maximum}}</div>
<div>slider value : {{weight}}</div>
<br/>
<br/>
<div ui-slider min="{{weight_minimum}}" max="{{weight_maximum}}" step="{{weight_increment}}" ng-model="weight">
</div>
your controller :
var app = angular.module('plunker', ['ui.slider']);
app.controller('MainCtrl', function($scope) {
$scope.selection = 'kg'
$scope.weight_minimum = 10;
$scope.weight_maximum = 1000;
$scope.weight_increment = 1;
$scope.weight = 50;
$scope.changUnit = function() {
if ($scope.selection == 'lbs') {
$scope.weight_maximum = $scope.weight_maximum * 2.2;
} else if ($scope.selection == 'kg') {
$scope.weight_maximum = $scope.weight_maximum / 2.2;
}
};
});

Related

Passing arrays through checkbox input values?

I am trying to get the intersection of two arrays when the user selects them but I don't know how to pass an entire array through an input value.
Here is my script:
var checkedValue = document.querySelector('.leaflet-control-layers-selector:checked').value;
result = _.intersection(checkedValue);
console.log(checkedValue);
document.getElementById("AllMuseums").value = AllMuseums;
document.getElementById("MPaid").value = MPaid;
document.getElementById("MFree").value = MFree;
document.getElementById("MResto").value = MResto;
Here are my inputs:
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="AllMuseums" checked><span>All Museums</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MPaid" value="MPaid"><span id="icons1">Paid Admission</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MFree" value="MFree"><span id="icons2">Free Admission</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MResto" value="MResto"><span id="icons3">Restaurants</span></div>
</label>
And here are my arrays:
var AllMuseums=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
MPaid=[Junibacken,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel],
MFree=[Naturhistoriska,ArkDes,Moderna],
MResto=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
So there is a solution : https://jsfiddle.net/ajxeyqo4
inputs :
first input tag add value
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="AllMuseums" value="AllMuseums" checked><span>All Museums</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MPaid" value="MPaid"><span id="icons1">Paid Admission</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MFree" value="MFree"><span id="icons2">Free Admission</span></div>
</label>
<label>
<div><input type="checkbox" class="leaflet-control-layers-selector" id="MResto" value="MResto"><span id="icons3">Restaurants</span></div>
</label>
<button onclick='test()'>
test
</button>
And your scripts :
function test(){
var AllMuseums=['Naturhistoriska','Junibacken','ArkDes','Fjarilshuset','Tekniska','Polismuseet','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel','Moderna'],
MPaid=['Junibacken','Fjarilshuset','Tekniska','Polismuseet','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel'],
MFree=['Naturhistoriska','ArkDes','Moderna'],
MResto=['Naturhistoriska','Junibacken','ArkDes','Fjarilshuset','Tekniska','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel','Moderna'];
var checkedValue = document.querySelectorAll('.leaflet-control-layers-selector:checked');
var a =[]
_.map(checkedValue, function(value) {
a.push(eval(value.value));
});
var result = _.intersection(...a);
console.log(JSON.stringify(result))
}

How Do I count the selected checkbox in AngularJS?

/**
* #Summary: checkAllConnectedUser function, to create album
* #param: index, productObj
* #return: callback(response)
* #Description:
*/
$scope.shardBuyerKeyIdArray = [];
$scope.countBuyer = 0;
$scope.checkAllSharedBuyer = function(isChecked) {
if (isChecked) {
if ($scope.selectAll) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
selectedBuyer.select = $scope.selectAll;
//IF ID WILL BE EXIST IN THE ARRAY NOT PSUH THE KEYID
if ($scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId) == -1) {
$scope.shardBuyerKeyIdArray.push(selectedBuyer.userTypeDto.keyId);
$scope.countBuyer++;
}
});
} else {
$scope.selectAll = false;
//USED FOR UNCHECK ALL THE DATA ONE- BY-ONE
angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
selectedBuyer.select = $scope.selectAll;
var index = $scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId);
$scope.shardBuyerKeyIdArray.splice(index, 1);
$scope.countBuyer--;
});
}
}
<div class="checkbox w3-margin" ng-if="selectedSharedBuyerObjectList.length > 0">
<span class="w3-right" ng-if="countBuyer">
<h5>You are selecting {{countBuyer}} buyers!</h5>
</span>
<label>
<input type="checkbox" ng-model="selectAll" ng-click="checkAllSharedBuyer(selectAll)"/>Check All
</label>
</div>
<div id="sharedRow" class="checkbox" ng-repeat="selectedBuyer in cmnBuyer = (selectedSharedBuyerObjectList | filter : userSearchInProduct
| filter : filterUser)">
<label>
<input type="checkbox" ng-model="selectedBuyer.select"
ng-change="selectedSharedBuyer($index, selectedBuyer.select, selectedBuyer.userTypeDto.keyId)"/>
{{selectedBuyer.personName}}
</label>
</div>
I have two list in which i have to count the select all checkbox length as well as single checkbox count my problem if the user un-check the ALL checkbox Checkbox count will be return -- what's the problem in my code?
$(function(){
var count = 0;
$('#sharedRow ').find('input[type=checkbox]').on('change',function(){
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
})
$('#chkAll').on('change', function () {
if ($(this).is(':checked')) {
$('#sharedRow ').find('input[type=checkbox]').prop('checked', true);
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
}
else {
$('#sharedRow ').find('input[type=checkbox]').prop('checked', false);
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox w3-margin">
<span class="w3-right">
<h5 id="msg" >You are selecting 0 buyers!</h5>
</span>
<label>
<input id="chkAll" type="checkbox" />Check All
</label>
</div>
<div id="sharedRow" class="checkbox">
<label>
<input type="checkbox" value="1 Buyers" />1 Buyers
</label>
<label>
<input type="checkbox" value="2 Buyers" />2 Buyers
</label>
<label>
<input type="checkbox" value="3 Buyers" />3 Buyers
</label>
<label>
<input type="checkbox" value="4 Buyers" />4 Buyers
</label>
<label>
<input type="checkbox" value="5 Buyers" />5 Buyers
</label>
<label>
<input type="checkbox" value="6 Buyers" />6 Buyers
</label>
<label>
<input type="checkbox" value="7 Buyers" />7 Buyers
</label>
<label>
<input type="checkbox" value="8 Buyers" />8 Buyers
</label>
</div>
try this one. is it ok? if not then tell me what's wrong.
if you have a group of checkbox then you can find all selected checkbox.
$('div').find('input[type=checkbox]:checked').length;
If you only need the number
var count = $scope.selectedSharedBuyerObjectList.reduce(function(sum, item) {
return (item.select) ? sum + 1 : sum;
}, 0);
If you need the filtered array
var selected = $scope.selectedSharedBuyerObjectList.filter(function(item) {
return item.select;
});
var count = selected.length;
Or do it using plain old loop
var count = 0;
for (i = 0; i < $scope.selectedSharedBuyerObjectList.length; i++) {
if ($scope.selectedSharedBuyerObjectList.select) count++;
}

count duplicate values in array using angularjs

I have a form with 5 questions and 3 different answers for each question.
e.g.
q1. whats is your favorite color?
radio button-1. value blue
radio button-2. value red
radio button-3. value grey
most of these questions have the same value (blue, red, grey), which is what I want, however, I'm trying to add all the values together at the end of the form so I can determine if the person filling out the form equals one of the values (blue, red, or grey).
I'm building this form with angularjs and this is what i have so far.
<label>Q1. what is your favorite color?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="formData.color" value="blue">
blue
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="formData.color" value="red">
red
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="formData.color" value="grey">
grey
</label>
</div>
this bit of code only works if I have the values already entered into the variable
$scope.formData = { };
$scope.formData = [];
$scope.formData.sort();
var current = null;
var cnt = 0;
for (var i = 0; i < $scope.formData.length; i++) {
if ($scope.formData[i] != current) {
if (cnt > 0) {
console.log(current + ' shows ' + cnt + ' times');
}
current = $scope.formData[i];
cnt = 1;
} else {
cnt++;
}
}
if (cnt > 0) {
console.log(current + ' shows ' + cnt + ' times');
}
Here is an example solution plunker. Would it work?
controller
$scope.questions = [
'Q1. what is your favorite color?',
'Q2. what color is your car?',
'Q3. what color best represents you?'
];
$scope.formData = [];
$scope.stats = function() {
$scope.results = {};
for (var i = 0; i < $scope.formData.length; i++) {
var color = $scope.formData[i];
if(color) {
if ($scope.results.hasOwnProperty(color)) {
$scope.results[color]++;
} else {
$scope.results[color] = 1;
}
}
}
};
template
<div class="form-group" ng-repeat="q in questions">
<label>{{q}}</label>
<div class="radio">
<label>
<input type="radio" ng-model="formData[$index]" value="blue">blue
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="formData[$index]" value="red">red
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="formData[$index]" value="grey">grey
</label>
</div>
</div>
<button ng-click="stats()">show results</button>
<ul>
<li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li>
</ul>

Toggling the opacity of large number of elements with JavaScript or jQuery

I'm building a huge form that requires me to initially show the opacity of elements at 0.5 and when a button is clicked the opacity is 1.0. I am able to do this with JavaScript but I need to manage it better by not calling an if statement for each element. Note that the elements are in no particular order and some need to toggle the opacity of more than one element.
Working Demo need to revise
SIMPLE CSS
[id^="dp"] {
opacity: 0.5;
}
HTML
GROUP 1<BR>
<input type="radio" id="abc1" name="abc1" onclick="showabc();"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1" onclick="showabc();"/>
<label for="abc2"> No </label>
<div id="dpabc1">
<H4>Content 1 is dimmed</H4>
</div>
GROUP 2<BR>
<input type="radio" id="abc3" name="abc2" onclick="showabc();"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" onclick="showabc();"/>
<label for="abc4"> No </label>
<div id="dpabc7">
<H4>Content 2 is dimmed</H4>
</div>
GROUP 3<BR>
<input type="radio" id="abc5" name="abc3" onclick="showabc();"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" onclick="showabc();"/>
<label for="abc6"> No </label>
<div id="dpabc9">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11">
<H4>Content 3 item2 in its own div</H4>
CURRENT JAVASCRIPT I NEED TO REWRITE WITHOUT A BUNCH OF IF STATEMENTS FOR EACH ELEMENT
function showabc() {
if (document.getElementById("abc1").checked == true) {
document.getElementById("dpabc1").style.opacity = 1.0;
}
else {
document.getElementById("dpabc1").style.opacity = 0.5;
}
if (document.getElementById("abc3").checked == true) {
document.getElementById("dpabc7").style.opacity = 1.0;
}
else {
document.getElementById("dpabc7").style.opacity = 0.5;
}
if (document.getElementById("abc5").checked == true) {
document.getElementById("dpabc9").style.opacity = 1.0;
document.getElementById("dpabc11").style.opacity = 1.0;
}
else {
document.getElementById("dpabc9").style.opacity = 0.5;
document.getElementById("dpabc11").style.opacity = 0.5;
}
}
BEGINNING OF CODE REVISION HERE'S WHERE I'M STUCK. What I'm trying to do is match the variables in "checkMe" with the variables in dimMe. You can see abc1 & 3 need to show the opacity change of one item where abc5 needs to change to opacity to two items (dpabc9 & dpabc11).
function showabc() {
var checkMe = ["abc1" , "abc3" , "abc5" ];
var dimMe = ["dpabc1" , "dpabc7" , "dpabc9, dpabc11"];
for (var i=0, l=checkMe.length; i<l; ++i) {
document.getElementById(checkMe[i]).style.opacity = 1.0;
}
else {
document.getElementById(checkMe[i]).style.opacity = 0.5;
}
}
Given some minor changes to the HTML, the appropriate grouping of elements within <fieldset> elements, and the use of yes/no values, I'd suggest the following JavaScript:
function opacityToggle(){
// 'this' refers to the element to which the event-handling was bound:
var divs = this.getElementsByTagName('div'),
// using CSS syntax offered by 'querySelector()' to find the
// first input element of 'type=radio' and is checked:
confirmed = this.querySelector('input[type="radio"]:checked');
// iterates over the 'div' elements, and sets the opacity according
// to whether the checked radio input has the value of 'yes':
for (var i = 0, len = divs.length; i < len; i++) {
divs[i].style.opacity = confirmed.value === 'yes' ? 1 : 0.5;
}
}
// gets the fieldset elements:
var fieldsets = document.getElementsByTagName('fieldset');
// iterates over the fieldset elements:
for (var i = 0, len = fieldsets.length; i < len; i++) {
// and uses 'addEventListener' to add a listener for the 'change' event,
// when that event is detected, the opacityToggle function is called:
fieldsets[i].addEventListener('change', opacityToggle);
}
JS Fiddle demo.
This works on the following HTML:
<fieldset>
<legend>GROUP 1</legend>
<input type="radio" id="abc1" name="abc1" value="yes" />
<label for="abc1">Yes</label>
<input type="radio" id="abc2" name="abc1" value="no" />
<label for="abc2">No</label>
<div id="dpabc1">
<H4>Content 1 is dimmed</H4>
</div>
</fieldset>
<fieldset>
<legend>GROUP 2</legend>
<input type="radio" id="abc3" name="abc2" value="yes" />
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" value="no" />
<label for="abc4"> No </label>
<div id="dpabc7">
<H4>Content 2 is dimmed</H4>
</div>
</fieldset>
<fieldset>
<legend>GROUP 3</legend>
<input type="radio" id="abc5" name="abc3" value="yes" />
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" value="no" />
<label for="abc6"> No </label>
<div id="dpabc9">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11">
<H4>Content 3 item2 in its own div</H4>
</div>
</fieldset>
UPDATED HTML
UPDATED FIDDLE
GROUP 1<BR>
<input type="radio" id="abc1" name="abc1" onclick="showabc('content1',1);"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1"
onclick="showabc('content1',0);"/>
<label for="abc2"> No </label>
<div id="dpabc1" class="content1">
<H4>Content 1 is dimmed</H4>
</div>
GROUP 2<BR>
<input type="radio" id="abc3" name="abc2" onclick="showabc('content2',1);"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" onclick="showabc('content2',0);"/>
<label for="abc4"> No </label>
<div id="dpabc7" class="content2">
<H4>Content 2 is dimmed</H4>
</div>
GROUP 3<BR>
<input type="radio" id="abc5" name="abc3" onclick="showabc('content3',1);"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" onclick="showabc('content3',0);"/>
<label for="abc6"> No </label>
<div id="dpabc9" class="content3">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11" class="content3">
<H4>Content 3 item2 in its own div</H4>
</div>
UPDATED JAVASCRIPT
function showabc(cssClass,makeBold) {
var elements = document.getElementsByClassName(cssClass);
var opacity = 1.0;
if (makeBold == 0) {
opacity = 0.5;
}
for (var i = 0; i < elements.length; i++) {
elements[i].style.opacity = opacity;
}
}

javascript adding select and checkbox values/// getting negative numbers

I need to be able to have the user pick a billing term from a select drop down and then choose checkboxes to add to the total. It seems to work relatively well on JSFIDDLE however on my site, there are some cases where selecting all the checkboxes and then resetting the total to 0 by selecting 'Choose billing term' then unchecking all the options will result in negative numbers. Does anyone have any suggestions? Even checking and unchecking options will start to get negative numbers.
HTML:
<div class="payment-term">
<label>Billing period:</label>
<select id="billing-price" name="billing-term" class="selectpicker">
<option value="0">Choose billing term</option>
<option value="300">12 Months: $300/mo. (Save 20%)</option>
<option value="350">1 Month: $350/mo.</option>
</select><br><br>
<label>Extra Features ($50/month): </label>
</div>
<section id="extra-features">
<div class="span3">
<label class="checkbox" for="Checkbox1">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
</label>
</div>
<div class="span3">
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Advertising
</label>
</div>
</section>
<div class="card-charge-info">
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
</div>
My javascript:
var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);
var price = 0;
var additional = 0;
function updatePrice(e) {
price = parseFloat(select.value);
document.getElementById('payment-total').innerText = price + additional;
if (price == select.options[2].value){
document.getElementById('payment-rebill').innerText = 0 + additional;
} else {
document.getElementById('payment-rebill').innerText = price + additional;
}
}
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
total2 = document.getElementById('payment-rebill');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
additional += add
total.innerHTML = price + additional
total2.innerHTML = price + additional
}
}
Working jsfiddle: http://jsfiddle.net/uZbee/2/
My site (not working correctly): http://thesomii.com/getstarted/basic/
I am using a javascript file for my checkboxes to give them a better appearance. I fear it maybe effecting my javascript code for the sum of checked boxes.
The negative value is caused by the input is not checked, so the this.checked in this line
var add = this.value * (this.checked ? 1 : -1);
is always false, resulting the added value is negative.
Change this.checked to this.parentNode.className.split(" ").indexOf("checked") > -1 may help.
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.parentNode.className.split(" ").indexOf("checked") > -1 ? 1 : -1);
additional += add
total.innerHTML = price + additional
total2.innerHTML = price + additional
}
}

Categories

Resources