We Keep Coding

How to get age based on month/day/year dropdown in FireFox

I am trying to get the age of users based on the month date and year field they enter in the dropdown. This is working in Chrome and other browsers but in Firefox I get an Invalid Date Error:
jQuery('#cons_birth_date_YEAR,#cons_birth_date_MONTH,#cons_birth_date_DAY').on('change',function(){
var selectedYear=$('#cons_birth_date_YEAR').find('option:selected').val();
var selectedDay=$('#cons_birth_date_DAY').find('option:selected').val();
var selectedMonth=$('#cons_birth_date_MONTH').find('option:selected').val();
if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0)
{
var today = new Date();
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);
console.log(dob);
var age = new Date(today - dob).getFullYear() -1970;
$("#age").val(age);
}
if (age < 13) {
alert('under 13');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>
<span class="aural-only cons_dob"></span>
<span class="input-label survey-question-label cons_dob">Date of Birth:</span>
</legend>
<span class="input-container">
<span id="cons_birth_date_date" title="Date:">
<select name="cons_birth_date_MONTH" id="cons_birth_date_MONTH" title="Month">
<option value="0">Month
</option>
<option value="1" selected="selected">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="cons_birth_date_DAY" id="cons_birth_date_DAY" title="Day">
<option value="0">Day
</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="cons_birth_date_YEAR" id="cons_birth_date_YEAR" title="Year">
<option value="0">Year
</option>
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</span>
</span>
</fieldset>
This script adds an alert if a user is under 13 years of age. This works in Chrome but in Firefox, the line below is returning the error: Invalid Date
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);

Try with this:
var dateSTR = "2019-07-02";
var dob = new Date(dateSTR.replace(/-/g,"/"));
You can read this and check the crossbrowsing problems.

How to combine values from three different fields and set it to the hidden field only when all the three fields are filled with values?

I've six fields on a form for showing the start time and end time in Hour: Minutes AM/PM format as follows :
<div class="block-time-term" style="padding-bottom:10px;">
<label>Starts at :</label>
<select name="hours_start" id="hours_start">
<option value="">hh</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minutes_start" id="minutes_start">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_start" id="am_pm_start">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label>Ends at :</label>
<select name="hours_end" id="hours_end">
<option value="">hh</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minutes_end" id="minutes_end">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_end" id="am_pm_end">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
Now there are two hidden fields present on the form as follows :
<input type="hidden" name="val[start_time]" id="start_time" value=""/>
<input type="hidden" name="val[end_time]" id="end_time" value=""/>
Now what I want to do is when user selects all the values from the respective drop downs only then the selected values should get combined and should be stored in respecive hidden fields.
For example if user selects Start Time as follows 2 from Hour, 30 from Minutes and PM then the string to be formed and to be stored should be 02:35 PM. Same should be applicable to end date.
If anything is missing proper alert message should appear. How should I achieve this using jQuery/Javascript?
Thanks.

I have created a JSFiddle for you. I made the hidden text boxes visible for you to check the output. It's better to replace the alert messages with a DIV in production. Hope this helps.
http://jsfiddle.net/su8898/m5r140cy/4/

Mathematical Operation with addition and multiplication

I have been trying to do this operation where quantity or Subtotal=value1+(value2*value3) but I can't figure out how to do the addition and multiplication in that order. I was trying it out on JS Bin and for some reason when I put 1 slab and BD variables it is 175 which is even below the value1 values. I would appreciate the help since I just started coding and with a bit of direct hints and help I will get better. Thank you.
I apologize for the confusing question. What I want is to create a form that will allow someone to know the price of a painted slab with a certain material. I found out I can do 2 slabs per hour, this is why value1 for numbers 1 and 2 = 300 an so on. Slab BD equals $75, slab BG equals $120. What I want is to calculate the price depending on number of slabs times the type of the slab. For example: If I want 1 slab of BD the math would be 300+(75*1) which is 300 for the hour of painting, 75 for the type and since I only use 1 of those types the multiplication at the end is 1. If I use 2 the math would be 300+(75*2), if I use three the math would be 600+(75*3). Feel free to ask if this is confusing. I appreciate any help.
Slabs
<select input id="numberofslabs"><br>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<script type="text/javascript">
var selectElement = document.getElementById("numberofslabs");
selectElement.addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
if(value1=="1")
value=300;
if(value1=="2")
value=300
if(value1=="3")
value=600
if(value1=="4")
value=600
if(value1=="5")
value=900
if(value1=="6")
value=900
if(value1=="7")
value=1200
if(value1=="8")
value=1200
if(value1=="9")
value=1500
if(value1=="10")
value=1500
if(value1=="11")
value=1800
if(value1=="12")
value=1800
if(value1=="13")
value=2100
if(value1=="14")
value=2100
if(value1=="15")
value=2400
if(value1=="16")
value=2400
if(value1=="17")
value=2700
if(value1=="18")
value=2700
if(value1=="19")
value=3000
if(value1=="20")
value=3000
var value2 =
document.getElementById("numberofslabs").value;
var value3 =
document.getElementById("materials").value;
document.getElementById("quantity").value
='$'+value1 + +value2*value3;
}
</script>
<br>
Subtotal:<td><input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/></td>

You mixed up 'value' and 'value1' in your code, which is the main bug, and becomes more apparent once you use a mathematical formula instead of a long if statement.
Then as other improvements, separating the concatenation + (from '$'+ ...) and the mathematical + with parentheses makes for less confusion.
Finally, you weren't listening for changes on the materials.
document.getElementById("numberofslabs").addEventListener('change',myFunction);
document.getElementById("materials").addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
value1 = (+value1 + value1 % 2) * 150;
var value2 = document.getElementById("numberofslabs").value;
var value3 = document.getElementById("materials").value;
document.getElementById("quantity").value ='$'+(+value1 + value2 * value3);
}
Slabs
<select input id="numberofslabs"><br>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<br>
Subtotal:<input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/>

Want display and hide drop down using javascript

I have a drop down for Number of guests and then need to show another drop down which will have age for each guest. Lets say if some one select 2 from number of guests then 2 other drop down will show to select their age from. This far I have done using following code but the problem is if some body first selects 2 by mistake and goes back to one, the displayed drop down remains there, instead one drop down should hide. Please refer to the code below:
CSS:
#kidsage40, #kidsage41, #kidsage42
{
display:none;
}
HTML:
<select name="kids4" onChange="showroom4kidsage(this.value);">
<option value="0">Kids</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="kidsage40" id="kidsage40">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
<select name="kidsage41" id="kidsage41">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
<select name="kidsage42" id="kidsage42">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="3">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
JAVASCRIPT:
function showroom4kidsage(value)
{
for(i=0;i<value;i++)
{
kidsage = 'kidsage1'+i;
document.getElementById(kidsage).style.display = "block";
}
}

The easiest way is to just hide them all first, then your loop will show the correct number of drowns after.
function showroom4kidsage(value){
for(i=0;i<3;i++){
document.getElementById('kidsage4' + i).style.display = "none";
}
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Or adding a classname to make accessing these inputs easier:
<select class="foo" id="kidsage41>...</select>
<select class="foo" id="kidsage42>...</select>
and then you can:
function showroom4kidsage(value){
document.getElementByClassName('foo').style.display = "none";
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}

Simply add a class onto the selectboxes, say "kidsageselect" and then have your javascript do this:
function showroom4kidsage(value) {
var elems = document.getElementsByClassName('kidsageselect');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = 'none';
}
for(var i = 0; i < value; i++) {
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}

you have to set all SELECTS to display:none before
Give all those select ONE class="randomclass" and set all elements in that class display:none
or set em one by one via loop or ony by one to display:none like
document.getElementById('kidsage42').style.display = "none";
that would hide the last select f.E.

Javascript truncating 0 from 05

I am having a problem in javascript. I have two select boxes, one for hours and one for minutes. When the user selects the time then the AM/PM should automatically be set.
Can anyone help me??? I have tried this code:
CODE:
<select class="cust_ddd3" id="phr" onchange="hors(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select class="cust_ddd2" id="pmns" onchange="mns(this.value);">
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
Pickup Time: <span id="hrs">08</span>:<span id="mns">00</span><span id="ap">AM</span>
Javascript
<script type="text/javascript">
function hors(str)
{
document.getElementById('hrs').innerHTML=+str;
}
function mns(str)
{
alert(str);
if(document.getElementById('phr').value<=11)
{
var pm="AM";
document.getElementById('ap').innerHTML=pm;
}
else
{
var am="PM";
document.getElementById('ap').innerHTML=am;
}
document.getElementById('mns').innerHTML=+str;
}
</script>

When you convert the minutes to number in
document.getElementById('mns').innerHTML=+str;
The first zero is discarded (normal numbers don't have leading zeroes).

The error is here document.getElementById('mns').innerHTML=+str;. You are using the +=, while you should be using +=, or =:
document.getElementById('mns').innerHTML = str;
The =+ converts the string to a number (and therefore, ignoring the zeros on the left) and then adding the result to the original value