We Keep Coding

how to make sum value changed depend on select box?

i have a multiple HTML select element
<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple">
and I generate rows like this
<td ng-model = "test123"
ng-if="selectedCar.includes(arrayItem.month)"
ng-init=" benefits(arrayItem) "
ng-repeat="arrayItem in data.information" class="tg-0lax">
{{::arrayItem.benefits}}
</td>
please note I call a function through : ng-init=" benefits(arrayItem)
this is my function:
$scope.benefits = function(item){
if (item){
benefits = benefits+ parseFloat(item.benefits);
$scope.benefitsCal= parseFloat(benefits);
} else {
$scope.benefitsCal = 0;
}
}
the problem, when I unselect a month from the multi-select, the total is not updated and I noticed that the value is incremental? this is my row that set the result from the function
<td class="tg-0lax"> {{benefitsCal}}</td>
please save my day

As you want to change value based on the selection from the select box then you should add
ng-change attribute and implement the function for change event.
Example:
<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple" ng-change="myChangeFunc()">

I can't get the value of my select element when i have a hidden field that is revealed if an option is selected

I have a select form element with various options. One of the options is "other". So when "other" is selected a hidden field is displayed for the user to enter the value not on the list. All that works fine. The problem is when a user selects any of the other options and submits the form, the value is not passed. Whereas, if the "other" option is selected and fills the text box then submits the form, the value of the text box is passed.
this is the select and the hidden text field:
<select name="memo" required class="newtxtbox" id="memo" onchange='checkvalue()'>
<option disabled="disabled" selected="selected">Select</option>
<option value="Donation for Bulletin">Bulletin</option>
<option value="Donation for Care Ministry">Care Ministry</option>
<option value="Donation for Cathedral Choir">Cathedral Choir</option>
<option value="Donation for Other">Other - (please specify below) </option>
</select>
<input type="text" style="display:none" name="memo" id="other">
and this is JavaScript:
function checkvalue()
{
if(document.getElementById('memo').value == 'Donation for Other') {
document.getElementById('other').style.display='block';
}
else {
document.getElementById('other').style.display='none';
}
}
I am sure i am missing something small but can't figure out what it is.

Here is a visual example of a small workaround. What I did was simply changing the name attribute of each element. I have added a CSS rule that displays the element with name="memo" as blue. The element that is blue will be sent to the server.
I have also expanded the javascript code so that you can test it out here on SO. You don't have to include the code after // added for testing purpose in your code. Click on "run code snippet" and try the submit button.
function checkvalue() {
var select = document.getElementById('memo');
var input = document.getElementById('other');
if (select.value == 'Donation for Other') {
document.getElementById('other').style.display = 'block';
select.name = '';
input.name = 'memo'; // form `memo` will now contain this input
} else {
document.getElementById('other').style.display = 'none';
select.name = 'memo';
input.name = '';
}
}
// added for testing purpose
document.getElementById('test').addEventListener('submit', function(e) {
e.preventDefault(); // no no submit
// FormData is HTML5 js object that contains ... data from the form ...
var fd = new FormData(this);
// .entries() isn't widely supported yet.
for (var tuple of fd.entries()) {
console.log(tuple[0] + ' contains value "' + tuple[1] + '"');
}
});
/*
added this for visibility of changes
element that is blue is being sent
*/
input[name="memo"],
select[name="memo"] {
background-color: lightblue;
}
<form id="test">
<select name="memo" required class="newtxtbox" id="memo" onchange='checkvalue()'>
<option disabled="disabled" selected="selected">Select</option>
<option value="Donation for Bulletin">Bulletin</option>
<option value="Donation for Care Ministry">Care Ministry</option>
<option value="Donation for Cathedral Choir">Cathedral Choir</option>
<option value="Donation for Other">Other - (please specify below) </option>
</select>
<input type="text" style="display:none" id="other">
<input type="submit" value="submit" />
</form>

How to get my javascript to look for class or anything other than val

I have a javascript script that looks for the value and of dropdown and changes the next dropdown menu based on what the value is, however this will no longer work for me as i need to pass the value back to ruby so i can save it in sessions.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="pmmargin3 exp" size="1" id="Exposures" title="" name="exposures_pt1">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="1">thing1</option>
<option value="1">thing2</option>
<option value="2">thing3</option>
<option value="1">thing4</option>
<option value="3">thing5</option>
</select>
<div class="container exposures leftmargin exp">
<div class="1">
<select class="second-level-select" name="exposures_pt2a">
<option selected disabled hidden style='display:none' value=''>- Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
</select>
</div>
<div class="2">
<select class="second-level-select" name="exposures_pt2b">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
<option value="infeasibility_option">thing4</option>
</select>
</div>
<div class="3">
<select class="second-level-select" name="exposures_pt2c">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="current_subpart">thing5</option>
<option value="proposed_subpart">thing6</option>
</select>
</div>
</div>
Thank you for any help, I'm fairly new to Javascript and am trying my best but still need some guidance.

As per what I understood. You want to send data selected in first dropdown to ruby to save it in Session.
If that is the case, on every select you can trigger AJAX call with cookies and update the session object accordingly and also subsequently display it in second dropdown as well.
Though, onChange AJAX is not a really good suggestion, in that scenario you can save selected option into browser sessionStorage and later add it to session object by a single ajax to your server at the end of your selection(dropdown) cycle.

Well i figured out how to get my results back and keep the value the same in my code so nothing else breaks here is how i did it.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
*added* var exposuredd = document.getElementById("Exposures");
*added* var selectedText = exposuredd.options[exposuredd.selectedIndex].text;
*added* document.getElementById("exp1").innerHTML="<input type='text' name='exposures_pt1' value='"+selectedText+"' >";
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
this needs to be in the erb im using this in
<p hidden id="exp1"></p>
So now i can pass whatever text is in my options to ruby such as...."Hey Here I am"
<option value="1">Hey Here I am</option>

Calling javascript function from html drop down automatically

I am not good in html or JavaScript and I have been trying alot to automatically call the JavaScript function from html drop down.
My requirement is to hide the html drop down and hard code the value of drop down and automatically call the function which will query the database on the basis of this hard coded value. Those other retrieved values from db will be used in UI.
JavaScript function is :
Behaviour.register({
'#retailerSelect': function(select) {
select.onchange = function() {
if (getValue(select) == ""){
setValue('query(branch)', "");
setValue('query(store)', "");
setValue('query(terminalId)', "");
}
this.form.submit();
}
},
HTML drop down is :
<td width="33%" align="center" >
<payo:layout columns="1">
<payo:cell nowrap="nowrap" align="center">
<html:select styleId="retailerSelect" style="margin:2px" property="query(retailer)">
<html:option value="1"><bean:message key="tms.dropdown.select.retailer"/></html:option>
<c:forEach var="retailer" items="${retailers}">
<html:option value="${retailer.id}">${retailer.retailerName}</html:option>
</c:forEach>
</html:select>
</payo:cell>
</payo:layout>
</td>
I need the value of drop down as 1, which will automatically call this onchange function to query the db.
please help,thanks in advance.

Use onchange to call the function
function selectedNum(number) {
alert(number);
}
<select name="numbers" onchange="selectedNum(this.value)">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

This can be achieved by two ways:
1. <select id="mySelect"></select>
$('#mySelect').click(function(){
var value = $(this).val();
// ajax call
});
2. <select onChange="myFunction(this.value)"></select>
function myFunction(value)
{
// ajax call
}

More Properties of Dropdown options

I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>

Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};