Closure with methods works until called from a click event

Closure with methods works until called from a click event - javascript

I am expanding this working code to supply the data via a select menu and run it via a click event. However, what was returned as text values, now returns weird stuff like:
{
/**id:1**/
"isTrusted": true,
"initMouseEvent": function initMouseEvent() {
[native code]
},
...
The change from the aforementioned working code is that the call to the closure methods is now within a click event listener. Any idea what is happening here?
//
const addButton = document.getElementById('addYear');
const deleteButton = document.getElementById('deleteYear');
const yearSelect = document.getElementById('yearSelect');
let selectedYear = yearSelect.options[yearSelect.selectedIndex].value;
const output = document.getElementById('output');
//
let newHandleYears = handleYears();
//
addButton.addEventListener("click", function(selectedYear) {
newHandleYears.addYear(selectedYear);
console.log(selectedYear);
output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
deleteButton.addEventListener("click", function() {
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
newHandleYears.deleteYear(2002); // WIP
output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
//
function handleYears() {
let years = [];
let addYear = (newYear) => {
years.push(newYear);
}
let deleteYear = (yearToDelete) => {
years = years.filter(item => item !== yearToDelete)
}
let calculateMaxYear = () => {
return Math.max(...years);
}
let getYears = () => {
return years
}
return {
getYears: getYears,
addYear: addYear,
deleteYear: deleteYear,
calculateMaxYear: calculateMaxYear
}
}
body {padding: 0.25rem 0.5rem;}
#output {
padding: 0.5rem 1rem;
border: solid 1px #ccc;
}
<form>
<p>
<label for="yearSelect">Year</label>
<select id="yearSelect">
<option value="">Select one...</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</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>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</p>
<p>
<input type="button" id="addYear" value="Add">
</p>
<p>
<input type="button" id="deleteYear" value="Delete">
</p>
</form>
<div id="output"></div>

SelectedYear should be a local variable inside the listener function, not a parameter to the function. The function parameter is the event, it shadows the global variable. And the global variable only has the value of the dropdown from when the page first loaded, not the value after they click the button.
//
const addButton = document.getElementById('addYear');
const deleteButton = document.getElementById('deleteYear');
const yearSelect = document.getElementById('yearSelect');
const output = document.getElementById('output');
//
let newHandleYears = handleYears();
//
addButton.addEventListener("click", function() {
let selectedYear = yearSelect.value;
newHandleYears.addYear(selectedYear);
console.log(selectedYear);
output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
deleteButton.addEventListener("click", function() {
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
newHandleYears.deleteYear(2002); // WIP
output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
//
function handleYears() {
let years = [];
let addYear = (newYear) => {
years.push(newYear);
}
let deleteYear = (yearToDelete) => {
years = years.filter(item => item !== yearToDelete)
}
let calculateMaxYear = () => {
return Math.max(...years);
}
let getYears = () => {
return years
}
return {
getYears: getYears,
addYear: addYear,
deleteYear: deleteYear,
calculateMaxYear: calculateMaxYear
}
}
body {
padding: 0.25rem 0.5rem;
}
#output {
padding: 0.5rem 1rem;
border: solid 1px #ccc;
}
<form>
<p>
<label for="yearSelect">Year</label>
<select id="yearSelect">
<option value="">Select one...</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</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>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</p>
<p>
<input type="button" id="addYear" value="Add">
</p>
<p>
<input type="button" id="deleteYear" value="Delete">
</p>
</form>
<div id="output"></div>

It seems to me that you are making things unnecessarily complicated for yourself. The following script will probably do exactly what you intended. The only global constant created is D, an object containing DOM references and the property years holding the selected years as an array.
const D=Object.fromEntries(['myForm','yearSelect','output'].map(n=>[n,document.getElementById(n)]));
D.years=[];D.n=75;D.start=new Date().getFullYear()-D.n+1;
D.yearSelect.innerHTML+=[...Array(D.n)].map((_,i)=>`<option>${i+D.start}</option>`).join("");
D.myForm.onclick=function(ev){
const y=D.yearSelect.value;
if(ev.target.type==="button"){
switch (ev.target.id){
case "addYear":
if(y) D.years.push(y);
break;
case "deleteFirstYear":
D.years.shift();
break;
case "deleteSelectedYear":
let pos=D.years.indexOf(y);
if(pos>-1) D.years.splice(pos,1);
break;
default: // deletelatestYear
D.years.pop();
}
D.output.innerHTML = D.years.length?`<p>Years: ${D.years.join(", ")}</p>
<p>Maximum year: ${Math.max(...D.years)}</p>`:"";
}
}
body {padding: 0.25rem 0.5rem;}
#output {
padding: 0.5rem 1rem;
border: solid 1px #ccc;
}
<form id="myForm">
<p>
<label for="yearSelect">Year</label>
<select id="yearSelect">
<option value="">Select one...</option>
</select>
</p>
<p><input type="button" id="deleteFirstYear" value="Delete first"></p>
<p><input type="button" id="addYear" value="Add"></p>
<p><input type="button" id="deleteSelectedYear" value="Delete selected"></p>
<p><input type="button" id="deleteLatestYear" value="Delete latest"></p>
</form>
<div id="output"></div>
In the above script there is only one click handler function, bound to the form element. Depending on which button is clicked, different parts of the switch expression are performed. I added another button simply to demonstrate how easy it is to add functionality in this concept.

Related

Age in years from select tag dropdowns?

I'm doing a small project for work, and I created a small HTML text file. Looking to parse the given date of birth from dropdown menus into an age that I can then run through a control flow.
I've created the dropdown lists to select the date of birth using the <select> tag, then option values. Afterwards added a submit button using the <input type="submit">
I'm trying to do this without using any external libraries or frameworks.
How can I get the person's age in only years?

it's not exactly and i suggest you to use a library but here is a proximation:
function calcAge() {
let day = document.getElementById('day').value;
let month = document.getElementById('month').value;
let year = document.getElementById('year').value;
let birthday = new Date(year, month, day);
document.getElementById('result').innerHTML = ~~(((Date.now() - birthday) / (31557600000)));
}
<label id="date_of_birth">Date of Birth:<br />
<select class="first" name="date_of_birth:day" tabindex="7" id="day">
<option value="">
<!-- -->
</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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="date_of_birth:mon" tabindex="8" id="month">
<option value="">
<!-- -->
</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="date_of_birth:year" tabindex="9" id="year">
<option value="">
<!-- -->
</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
</label>
<button onclick="calcAge()">
calculate
</button>
<br>
<div id="result" text="asdaaa">
</div>

What are the steps to make this dob calculator work ? JavaScript

Hey i'm doing a homework on how to make a dob calculator on JavaScript. I'm a beginner by the way. This exercice is about calculating age based on 3 select and then i display it with an alert() i need some of you to help me on what to do on JavaScript.
I create some variable to get the values of these select but it doesn't work as i expected. I don't know what are the steps make it functional
<form action="#" method="post">
<div class="field dob">
<label for="dob-day">Day:</label>
<select name="dob-day" id="dob-day">
<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>
<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>
</div>
<div class="field dob">
<label for="dob-month">Month:</label>
<select name="dob-month" id="dob-month">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avrl</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</div>
<div class="field dob">
<label for="dob-year">Year:</label>
<select name="dob-year" id="dob-year">
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<div class="actions">
<button type="button" id="run">Run</button>
</div>
</form>
Here's my code on JavaScript...
let now = new Date();
let day = document.getElementById("dob-day").value;
let month = document.getElementById("dob-month").value;
let year = document.getElementById("dob-year").value;
(function() {
document.getElementById("run").addEventListener("click", function(){
})
})();

YOu will not need an iife and get the value of day,month and year inside the click function.
Then using Date function convert the input to date and subtract from current date and get the number of days.
document.getElementById("run").addEventListener("click", function() {
let now = new Date();
let day = document.getElementById("dob-day").value;
let month = document.getElementById("dob-month").value;
let year = document.getElementById("dob-year").value;
var timeDiff = Math.abs((new Date(`${month}/${day}/${year}`)).getTime() - now.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
console.log(diffDays)
})
<form action="#" method="post">
<div class="field dob">
<label for="dob-day">Day:</label>
<select name="dob-day" id="dob-day">
<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>
<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>
</div>
<div class="field dob">
<label for="dob-month">Month:</label>
<select name="dob-month" id="dob-month">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avrl</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</div>
<div class="field dob">
<label for="dob-year">Year:</label>
<select name="dob-year" id="dob-year">
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<div class="actions">
<button type="button" id="run">Run</button>
</div>
</form>

anchor tag cant fire click function from display none div

the div with display none style have an anchor tag which will delete that div on click function
for complete code review link it is working on browser but not at jsfiddle
https://jsfiddle.net/eqaxh7d0/
i am appending display none div to another div which is display block so apparently anchor tag will be visible but
but no click function
and for delete i am using this code
$(document).ready(function() {
$('.close-div').on('click',function() {
$(this).closest('div#nestedFeilds').remove();
});
});

jQuery is not loaded at linked jsfiddle. If expected result of clicking <a> element is to remove the parent element you can append the .innerHTML to a <div> element attach click event to the <a> element within <div> element, call event.preventDefault() within event handler to prevent default action of navigation, and call $(this).parent().remove() to remove the dynamically created <div> parent element where .innerHTML is set
$(function() {
var i = 0;
$("#addNew").click(function() {
i++;
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#nestedFeilds :input").each(function() {
var orignalname = $(this).attr('name');
$(this).attr('name', orignalname.substring(0, orignalname.length - 1) + i);
});
$("#showhere").append(
$("<div>", {"class":"field-parent", html:maindiv})
.find("a").on("click", function(e) {
e.preventDefault();
$(this).parent(".field-parent").remove()
}).end()
);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your Profile</label>
<div class="row" id="mainContainer">
<div class="col-md-1 col-xs-4">
<label for="Education">Education</label>
</div>
<div class="col-md-8 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
Delete Education
<input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name_0">
<br>
<input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name_0">
<br>
<input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name_0">
<br>
<div class="row">
<div class="col-xs-3">
<select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name_0" value=''>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month_0" value=''>Select Month
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
<div style="margin-left: -20px;float:left;">
<p style="text-align: left; margin-top: 5px"> to</p>
</div>
<div class="col-xs-3">
<select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name_0" value=''>Select Month
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month_0" value=''>Select Month
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" id="2ndmainContainer">
<div class="col-md-1 col-xs-4"></div>
<div class="col-md-8 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
<div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>

Pass data from 3 select's to one input

I've got three select fields (day, month, year). I need to pass their value automatically to one (at the hidden) input field (which will be transfered to database. The jquery code which i have wrote is bellow.
Unfortunatelly - it seems wrong/with error. How can I write it better to avoid such mistakes? currently data is not passed.Full code is here:
var dd_value = document.getElementById("dd_value");
var mm_value = document.getElementById("mm_value");
var yy_value = document.getElementById("yy_value");
(dd_value+mm_value+yy_value).onchange = function(){
var textbox = document.getElementById("bdaysummary");
textbox.value = dd_value;
};
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Pick one of two:</p>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>
<hr />
<div>
<select id="dd_value">
<option>- Day -</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>
<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 id="mm_value">
<option>- Month -</option>
<option value="0">Unknown</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">Nobember</option>
<option value="12">December</option>
</select>
<select id="yy_value">
<option>- Year -</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
<br />
<input name="bdaysummary" id="bdayummary" type="text" />
</div>
</form>

<script>
$(document).ready(function(){
$('#dd_value, #mm_value, #yy_value').change(function(){
dd_value = $('#dd_value').val();
mm_value = $('#mm_value').val();
yy_value = $('#yy_value').val();
result = dd_value+'-'+mm_value+'-'+yy_value;
$('#bdayummary').val(result);
});
})
</script>
Recommendation:
Use zero fill format for days and months numbers (for example 01 instead of 1) to prevent unwanted behaviors.
Notice:
As Hubert said too, you must think about a solution for the first options that don't have valid value. This code is focused only on gathering data from select inputs and putting them inside another input.

Here you go. check inline comments for detailed explanation.
DEMO
First I would like to add a class to your each select say .bd and write a change event to that class
$('.bd').on('change',function(){
var allSelect=true; //for validation purpose
$.each($('.bd'),function(){
var value=$(this).find('option:selected').text();//store the current value
if(value=='- Day -' || value=='- Month -' || value=='- Year -')
//if value selected is any of these value then set allSelect=false
allSelect=false
});
if(allSelect) //Proceed only if its true
{
var date=$('#dd_value option:selected').text(); //get date
var month=$("#mm_value option:selected").text(); //get month
var year=$("#yy_value option:selected").text(); //get year
var newDate=date +"-"+month+"-"+year; //combine it
$("#bdayummary").val(newDate); //display in textbox
}
});
Note : You can select date in any order but still validation happens
UPDATE
As per Hubert's comments I am updating this answer and DEMO too. Now this is taking val() and assigning the same.
DEMO UPDATED
$('.bd').on('change',function(){
var allSelect=true;
$.each($('.bd'),function(){
var value=$(this).find('option:selected').val();
if(value=='- Day -' || value=='- Month -' || value=='0' || value=='- Year -')
{
allSelect=false;
return false; //to break loop if any found
}
});
if(allSelect)
{
var date=$('#dd_value option:selected').val();
var month=$("#mm_value option:selected").val();
var year=$("#yy_value option:selected").val();
if(month<10)
month="0"+month;
var newDate=date +"-"+month+"-"+year;
$("#bdayummary").val(newDate);
}
});

Your problem lies in
(dd_value+mm_value+yy_value).onchange = function() {...}
The "+" operator on elements coerces the elements to strings and concatenates them. So basically you're assigning the "onchange" property to a string, not the the elements. Assign them one by one or use jQuery like this:
$([dd_value, mm_value, yy_value]).change(function() {...})

Try something like that (jQuery):
$(dd_value, mm_value, yy_value).on('change', function(){
....
});

$("#yy_value,#dd_value,#mm_value").change(function() {
var dd_value = $("#dd_value").val();
var mm_value = $("#mm_value").val();
var yy_value = $("#yy_value").val();
alert(dd_value+"-"+mm_value+"-"+yy_value);
});
Try This Code This Will Work For You should include jquery for this
Edit
if(dd_value != '- Day -' && mm_value !='- Month -' && yy_value != '- Year -')
{
alert(dd_value+"-"+mm_value+"-"+yy_value);
}
To
alert(dd_value+"-"+mm_value+"-"+yy_value);
due to change function this will be evaluated only when all fields are change as
$("#yy_value,#dd_value,#mm_value").change(function() {}); so this will resolve this

This is basically Mohammad's answer extended by some value checks and zero-padding:
$(document).ready(function(){
$('#dd_value, #mm_value, #yy_value').change(function(){
var dd_value = $('#dd_value').val();
var mm_value = $('#mm_value').val();
var yy_value = $('#yy_value').val();
var result = "";
// check that the values are not undefined (missing value)
if ($.inArray("undefined", [ typeof dd_value, typeof mm_value, typeof yy_value ]) < 0)
{
// add padding zero
dd_value = dd_value.length === 1 ? "0"+dd_value : dd_value;
mm_value = mm_value.length === 1 ? "0"+mm_value : mm_value;
var result = dd_value+'-'+mm_value+'-'+yy_value;
}
$('#bdayummary').val(result);
});
})

Check on every page to ensure user has validated as being over 18

I'm working on a website (tobacco related) that requires all visitors to validate they are over 18 before they can view the site. I have a form in place that validates the age but I'm at a dead end. How can I use this to store a cookie that they've passed the test and do a check on all pages to see if this check has already been passed or not? Any suggestions and help would be hugely appreciated! Below is my validation form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validate</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script language="javascript">
function checkAge()
{
var min_age = 18;
var year = parseInt(document.forms["age_form"]["year"].value);
var month = parseInt(document.forms["age_form"]["month"].value) - 1;
var day = parseInt(document.forms["age_form"]["day"].value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ( (today.getTime() - theirDate.getTime()) < 0) {
alert("You are too young to enter this site!");
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form action="index.html" name="age_form" method="get" id="age_form">
<select name="day" id="day">
<option value="0" selected>DAY</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>
<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="month" id="month">
<option value="0" selected>MONTH</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="year" id="year">
<option value="0" selected>YEAR</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
</form>
</body>
</html>

If you want to do this all on the client side, you certainly can. Keep in mind that this will be easily circumventable, so you never want to implement actual security in javascript on the client, but for something silly to keep watchdog groups off your back, this will work.
I'm assuming you have the html file you pasted above saved as checkAge.html. Add the following to the <form> tag:
<form action="index.html" name="age_form" method="get" id="age_form" onSubmit="checkAge()">
This will execute the checkAge function when the form is submitted. If the person says they are over age 18, then the function returns true, and the form gets submitted, and index.html is loaded. If they say they are not 18, the function returns false, the alert popup is displayed, and the form is not submitted.
And modify your checkAge function so the last part looks like this:
var ret;
if ( (today.getTime() - theirDate.getTime()) < 0) {
alert("You are too young to enter this site!");
ret = false;
}
else {
ret = true;
}
setCookie('ageCheck', ret, 1); // save the cookie for one day
return ret;
}
This adds the code to set the cookie, and then return true or false.
Also, you will need to add this function to make setting cookies easier:
function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
This is just a helper function to make setting the cookie a little easier.
Then, on your content pages, you might do something like this:
<html>
<head>
<title>My age-restricted content</title>
<script>
window.onload = function () {
var ageCheck = getCookie('ageCheck');
if ('true' == ageCheck) {
document.getElementById('content').style.display = '';
} else {
window.location = '/checkAge.html';
}
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
</script>
</head>
<body>
<div id="content" style="display: none;">
You can't see this unless you are old enough
</div>
</body>
</html>
This makes the content of the page invisible by default. When the page loads, the javascript code will check to see if there is a cookie indicating the person is 18. If there is, then the page content is displayed. If there is no cookie, of there is a cookie saying the person is under 18, then they are redirected to the age check page.

We Keep Coding

JavaScript is the programming language of the Web.

Closure with methods works until called from a click event - javascript

Related

Age in years from select tag dropdowns?

What are the steps to make this dob calculator work ? JavaScript

anchor tag cant fire click function from display none div

Pass data from 3 select's to one input

Check on every page to ensure user has validated as being over 18

Categories

Resources