Develop Reference

How to use two IDs from JS?

On my page with payment I need two inputs with total payment value:
- one that the client can see
- another one which is hidden.
I wrote a code which pass price of every element to the input when a client check a box with a product they want to pay for, but it works only with the one input.
I was trying to use different options (like getElementsByName and getElementsByClassName) but I am learning JS now and I have no idea how to solve this problem. :(
function select(selector, parent){
return Array.from((parent||document).querySelectorAll(selector));
}
var inputs = select('.sum'),
**totalElement = document.getElementById('payment-total');**
function sumUpdate(){
totalElement.value = inputs.reduce(function(result, input){
return result + (input.checked ? parseFloat(input.value) : 0);
}, 0).toFixed(0);
}
WHAT I TRIED:
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total')[0][1];**
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total, payment-total2')[0][1];**
var inputs = select('.sum'),
**totalElement = document.getElementsByName('payment-total).getElementsByName('payment-totalTwo);**

If I'm understanding you right, you want to put the computed value in both the id="payment-total" element and the id="payment-total2" element.
If so, just do what you've already done for payment-total, but for payment-total2 as well, see *** comments:
var inputs = select('.sum'),
totalElement = document.getElementById('payment-total'),
totalElement2 = document.getElementById('payment-total2'); // ***
function sumUpdate(){
//vvvvvvvvvvvvvvvvvvvvvv---- ***
totalElement2.value = totalElement.value = inputs.reduce(function(result, input){
return result + (input.checked ? parseFloat(input.value) : 0);
}, 0).toFixed(0);
}
I don't immediately see the reason for having both a visible and a hidden input, but if you need that for some reason, that's how you'd do it.
If it got to the point there were three or more elements you wanted to update, I'd probably give them all a class and select them the way you've selected your .sum elements, then compute the total once and assign it to all of them in a loop. But for just two, repeating the lookup and assignment seems fine.

How can get last value of form charge in jQuery

I am trying to make a form where a customer can choose parson and automatically show the cost depend on parson number. So for that, I used jQuery form change function and calculate the cost inside of the function. My all logic is working ok but the issue is when increasing number then showing multiple costs.
Visual look:
Always I want to show the last one/ updated one
Blow my code:
var adultsSingleChage = 200;
var childrenSingleCharge = 100;
var infantsSingleCharge = 50;
$('#absbt_form input').change(function(){
var adults = $("#absbt_adults").val();
var adultsCharge = adults * adultsSingleChage;
var children = $("#absbt_children").val();
var childrenCharge = children * childrenSingleCharge;
var infants = $("#absbt_infants").val();
var infantsCharge = infants * infantsSingleCharge;
var totalCharge = adultsCharge + childrenCharge + infantsCharge;
console.log(totalCharge);
$('.total_cost').append(totalCharge);
});
I know I did the maximum of logic but for last logic, I'm confused.
How can I just show the last one?

append adds new content to existing one - that's the reason of having previous values.
Instead of using append use text:
$('.total_cost').text(totalCharge);

The problem is with the code you are appending which means you are adding the text into the element instead of replacing it. You can use the following two methods:
text(): $('.total_cost').text("iota")
html(): $('.total_cost').html("iota")
Note: Use id selector or with class use $($('.total_cost')[0])

Use html(totalCharge) instead of append(totalCharge)

Add an Array of Arrays as an Array under a property to an Array

I want to get an output like this:
["userDefined": [["1","2","3"],["4","5","6"],["7","8","9"]],
"anotherDefined":[["a","b","c"],["d","e","f"],["g","h","i"]]]
And this is the code I'm using right now:
var outterArray = [];
var ultimateArray = [];
//This one works
$(document).on("click", '[id^="addArray"]', function () {
var innerArray = [];
innerArray.push(val1, val2, val3);
outterArray.push(innerArray);
});
//This one doesn't
$(document).on("click", '[id^="grouUnderProperty"]', function () {
ultimateArray.push(varByUser:outterArray);
});
Excuse my broken english and thanks in advance.
Edit 2:
Epascarrelo said that I was looking for an object instead of an array, and I think that he might be right, but it still doesn't work under an object, I've tried:
var ultimateArray = {};
ultimateArray.property.push(outterArray);
ultimateArray.property = outterArray;
And it still doesn't work.
Edit 3: I got the answer using a suggestion by Epascarrelo.
This is what is working for me right now:
var definedByUser = "textDefinedByUser";
ultimateArray[definedByUser] = outterArray;
Is giving me:
Object {textDefinedByUser: Array[3]}
Thanks for the help and time, and I'll keep the suggestions in mind if I even need to ask abother question.

Dynamically updating datamaps fill color not working using variable as country key

I'm having weird problems with datamaps updateCloropleth function. I followed this example :
https://github.com/markmarkoh/datamaps/releases/tag/v0.2.2
Here is an example of my problem. When I do this:
map.updateChoropleth({
"AFG": colorx
});
The color updates. However, when I do this:
var countryx = "AFG";
map.updateChoropleth({
countryx: colorx
});
It doesn't work.
I've checked that countryx == "AFG" returns true, so it's definitely the same value. The variable colorx can be passed fine, but passing the variable countryx as a key seems to break the function.
Any ideas how or why this is happening?

You can try this:
var colorx = 100;
var countryx = "AFG";
var countryColor = {};
countryColor["AFG"] = colorx;
map.updateChoropleth(countryColor);
See this thread - basically your problem stems from the fact that these two statements are the same:
var obj = {"countryx": colorx}
var obj = {countryx: colorx}

Using one javascript function for multiple inputs on one form

We have a simple age calculating script, that takes a date input (3 selects - day, month, year) and determine how old. It is triggered by an onChange assigned to the year select.
There are several date inputs scattered through the form, each one set up the same, other than the input names (day1 vs day 1 vs day 3, etc).
Currently we have simply duplicated the js code and manually changed the input variables ...
function Age1()
{
var oldDay = document.step1.day1.value;
var oldMonth = document.step1.month1.value;
var oldYear = document.step1.year1.value;
and more script....
function Age2()
{
var oldDay = document.step1.day2.value;
var oldMonth = document.step1.month2.value;
var oldYear = document.step1.year2.value;
and more script....
and so forth.
Ideally we would like to reuse one script, rather than hardcoding one for each instance. I have tried a bunch of ideas to no avail, but the ideal would be to trigger it via: onChange="Age(X);" and then have the js insert the proper variable:
function Age(varX)
{
var oldDay = document.step1.dayX.value;
var oldMonth = document.step1.monthX.value;
var oldYear = document.step1.yearX.value;
and so on ....
Any ideas for us ? Thanks in advance

function Age(varX)
{
var oldDay = document.step1['day' + varX].value;
var oldMonth = document.step1['month' + varX].value;
var oldYear = document.step1['year' + varX].value;
}