I'm saving the form data in javascript sessions every value I'm getting the correct values after submitting the form. but when I click back to my form there is date format not saving the correct format of date which I filled on submitting time.
15/11/1992 date format ( working fine when I'm submitting the form/)
15,11,1992( getting this value in session when I reload the page)
"use strict";
//********************* get and set details ******************
function getDetails(){
if (typeof(Storage)!=="undefined"){
if (sessionStorage.getItem("fName") !== null){
document.getElementById("fName").value = sessionStorage.getItem("fName");
}
if (sessionStorage.getItem("lName") !== null){
document.getElementById("lName").value = sessionStorage.getItem("lName");
}
if (sessionStorage.getItem("dob") !== null){
document.getElementById("dob").value = sessionStorage.getItem("dob");
}
if (sessionStorage.getItem("gender") !== null){
document.getElementById("gender").value = sessionStorage.getItem("gender");
}
if (sessionStorage.getItem("street_address") !== null){
document.getElementById("street_address").value = sessionStorage.getItem("street_address");
}
if (sessionStorage.getItem("town") !== null){
document.getElementById("town").value = sessionStorage.getItem("town");
}
if (sessionStorage.getItem("state") !== null){
document.getElementById("state").value = sessionStorage.getItem("state");
}
if (sessionStorage.getItem("postcode") !== null){
document.getElementById("postcode").value = sessionStorage.getItem("postcode");
}
if (sessionStorage.getItem("phone") !== null){
document.getElementById("phone").value = sessionStorage.getItem("phone");
}
if (sessionStorage.getItem("other") !== null){
document.getElementById("other").value = sessionStorage.getItem("other");
}
if (sessionStorage.getItem("otherText") !== null){
document.getElementById("otherText").value = sessionStorage.getItem("otherText");
}
}
}
function setDetails(fName, lName, dob,gender,street_address,town,state,postcode,phone,other,otherText) {
if (typeof(Storage)!=="undefined"){
sessionStorage.setItem("fName", fName);
sessionStorage.setItem("lName", lName);
sessionStorage.setItem("dob", dob);
sessionStorage.setItem("gender", gender);
sessionStorage.setItem("street_address", street_address);
sessionStorage.setItem("town", town);
sessionStorage.setItem("postcode", postcode);
sessionStorage.setItem("phone", phone);
sessionStorage.setItem("other", other);
sessionStorage.setItem("otherText", otherText);
}
}
//********************* get and set Job Ref ******************
function setJobRef (jobRefNumber){
if(typeof(Storage)!=="undefined"){
localStorage.setItem("jobRef", jobRefNumber);
}
}
function getJobRef (){
if(typeof(Storage)!=="undefined"){
if (localStorage.getItem("jobRef") !== null) {
var jobRef= document.getElementById("jobRef");
jobRef.value = localStorage.getItem("jobRef");
}
}
}
//********************* validate ******************
function validate() {
var errMsg="";
var result=true;
var fName=document.getElementById("fName").value;
var lName=document.getElementById("lName").value;
var dob = document.getElementById("dob").value.split("/");
var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);
var today = new Date();
var age = today.getFullYear() - date.getFullYear();
var gender = document.getElementById("gender").value;
var street_address = document.getElementById("street_address").value;
var town = document.getElementById("town").value;
var postcode = document.getElementById("postcode").value;
var phone=document.getElementById("phone").value;
var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;
var other = document.getElementById("other").checked;
var otherText = document.getElementById("otherText").value;
if (fName=="") {
errMsg += "Please enter your first name.<br>";
result=false;
}
if (lName=="") {
errMsg += "Please enter your last name.<br>";
result=false;
}
if (dob=="")
{
errMsg += "Please enter your date of birth.<br>";
result=false;
}
if (age >= 80)
{ // Outside age ranges.
errMsg +="You must be 80 or younger to apply for this job\n";
result = false;
}
if (age <= 15)
{ // Outside age ranges.
errMsg += "You must be 15 or older to apply for this job\n";
result = false;
}
var regex;
//VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
switch (state) {
case "Please Select":
return false;
case "VIC":
regex = new RegExp(/(3|8)\d+/);
break;
case "NSW":
regex = new RegExp(/(1|2)\d+/);
break;
case "QLD":
regex = new RegExp(/(4|9)\d+/);
break;
case "NT":
regex = new RegExp(/0\d+/);
break;
case "WA":
regex = new RegExp(/6\d+/);
break;
case "SA":
regex = new RegExp(/5\d+/);
break;
case "TAS":
regex = new RegExp(/7\d+/);
break;
case "ACT":
regex = new RegExp(/0\d+/);
break;
}
if(!postcode.match(regex)){
errMsg += "State and postcode do not match\n";
result = false;
}
if (other && document.getElementById("otherText").value.trim().length===0)
{
errMsg += "You have selected other skills, you must enter one other skill in the text box\n";
result = false;
}
// more validation here
if (errMsg!="")
document.getElementById("err").innerHTML=errMsg;
else { // no error, save data to storage
setDetails(fName,lName,dob,gender,street_address,town,state,postcode,phone,other,otherText);
}
return result;
}
//********************* init ******************
function init() {
if (document.getElementById("applyPage")!=null) { // apply page init
getJobRef();
getDetails();
document.getElementById("applyForm").onsubmit = validate;
}
else if (document.getElementById("positionPage")!=null) { // position page init
var applylinks=document.getElementsByClassName("applylink"); // array
for (var i=0; i<applylinks.length; i++)
applylinks[i].onclick = function () { setJobRef(this.id); }
}
}
window.onload = init;
***HTML****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Student personal detail" />
<meta name="keywords" content="Peronal Details of volunteer or student," />
<meta name="author" content="Name student " />
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
<script src="my.js"></script>
<title>Apply to Voulnteer</title>
</head>
<body id="applyPage">
<div id="leftsidebar">
<!-- menu -->
<header id="header">
<h1>Imagine a world free from Cancer. Help make it a reality.</h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Positions</li>
<li>Apply Now</li>
<li>Details</li>
<li>Enhancements</li>
</ul>
</div>
</header>
<!-- menu end -->
<!-- right hand side content -->
<aside class="rightnews">
<span class="style3">Current Happenings</span><br />
<img src="images/bullet.gif" alt="blue" width="19" height="16" /><br /> <br />
<img src="images/cancer_awareness_month.jpeg" alt="cancer_awareness_month" width="130" height="95" /><br /><br />
<img src="images/breast_cancer.png" alt="breast cancer" width="130" height="93" /><br /><br />
<img src="images/month.jpeg" alt="awareness_month" width="130" height="99" />
<br />
</aside>
<!-- right hand side content end -->
<!-- left hand side content -->
<aside id="f">
<h2 >About Volunteering:</h2>
<div class="leftnews">
<img src="images/Vol3.png" alt="blue" style="width: 140px;height: 100px;"><br />
As an Melbourne Red Cross volunteer you can honor a survivor or a loved one lost to cancer, help save lives of people in your local community, and around the world. It only takes a little time to do a lot of good. Discover how rewarding it is to be a volunteer.
<br />
<br />
</div>
</aside>
<!-- left hand side content end -->
<!-- center side content -->
<div id="content"><br/><br/>
<h2 class="style7">Apply Now</h2>
<div class="style3">
<form id="applyForm" method="post" action="https://mercury.swin.edu.au/it000000/formtest.php">
<p id="err"></p>
<p><label for = "jobRef">Job Reference Number: </label>
<input name= "jobRef" id="jobRef" readonly/></p>
<p><label for = "fName">First Name: </label>
<input name= "fName" id="fName" /></p>
<p><label for = "lName">Last Name: </label>
<input name= "lName" id="lName" /></p>
<p><label for="dob">*Date of Birth:</label>
<input type="text" name="dob" id="dob" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" maxlength="10" size="10"/></p>
<p id="err"></p>
<fieldset>
<legend>Gender:</legend>
<input type = "radio" name = "gender" id="gender" value = "male"> Male
<input type = "radio" name = "gender" id="gender" value = "female"> Female
</fieldset>
<br>
<label for="street"> Street Address:</label><br>
<input type="text" name="street_address" id="street_address" required pattern="[A-Za-z]{1,40}">
<br>
<label for="town"> Suburb/Town </label><br>
<input type="text" name="town" id="town" required pattern="[A-Za-z]{1,40}">
<p><label for="state">*State:</label>
<select name="state" id="state" required="required">
<option value="">Please Select</option>
<option value="WIC">WIC</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="ACT">ACT</option>
</select>
<p id="err"></p>
</p>
<p><label for="postcode">*Postcode:</label>
<input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" />
</p>
<label for="phone"> Phone Number </label><br>
<input type="tel" name="phone" maxlength="12" pattern="[0-9]{8,12}" id="phone" />
<br>
<p>Skill list:</p>
<p><label for="Dancing">Dancing</label>
<input type="checkbox" id="Dancing" name="skills[]" checked="checked" value="Dancing" /></p>
<p><label for="Singing">Singing</label>
<input type="checkbox" id="Singing" name="skills[]" value="Singing" /></p>
<p><label for="other">Other Skills:</label>
<input type="checkbox" id="other" name="skills" /></p>
<textarea id="otherText" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>
<p><input type= "submit" value="Apply"/>
<input type= "reset" value="Reset"/></p>
</form>
</div>
<br>
</div>
<!-- right hand side content -->
<!-- Footer -->
<div id="footer">Copyright © 2019 Melbourne Red Cross Society</div>
<!--footer end -->
</div>
</body>
</html>
If you are referring to the "dob" field, I would personally not try to store that as a date object. In my experience, this can cause issues when your user is in a different time zone as your server. People are not entering a timestamp of when they were born, they are entering the calendar day. So even if I was born on January 1st in my time zone, and it was December 31st in your time zone at that time, you would not say my birthday is December 31st. Really what you care about is the day, month, and year.
Another note, it would be much cleaner to store your session storage properties in a list, then iterate over the list like so:
function getDetails(){
if (typeof(Storage)==="undefined"){
return; // return early to avoid code clutter
}
let properties = ['fName', 'lName', 'dob', 'blah', 'blah', 'blah'];
properties.forEach(p => {
if (sessionStorage.getItem(p) !== null){
document.getElementById(p).value = sessionStorage.getItem(p);
}
});
}
Related
Why isn't this function storing variables and why isn't it validating the first name? It won't work for some reason. There are no error messages in the console when I open the website. Please help, this is very annoying and I've been struggling with this for a while. Is there something going past the error messages that are stopping my JavaScript code from working?
"use strict";
function validate() {
var errMsg = "";
var result = true;
// get variables from form and check rules
// if something is wrone set result to false and add error message
var fname = document.getElementById("fname").value; //validates first name
if (!fname.match(/^[a-zA-Z]+$/)) {
errMsg += "Please enter your first name (Only alpha characters).\n";
result = false;
}
/*get variables from form and check rules*/
var postcode = document.getElementById("postcode").value;
var state = document.getElementById("state").options[
document.getElementById("state").selectedIndex
].text;
var regex;
//VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
switch (state) {
case "Please Select":
return false;
case "VIC":
regex = new RegExp(/(3|8)\d+/);
break;
case "NSW":
regex = new RegExp(/(1|2)\d+/);
break;
case "QLD":
regex = new RegExp(/(4|9)\d+/);
break;
case "NT":
regex = new RegExp(/0\d+/);
break;
case "WA":
regex = new RegExp(/6\d+/);
break;
case "SA":
regex = new RegExp(/5\d+/);
break;
case "TAS":
regex = new RegExp(/7\d+/);
break;
case "ACT":
regex = new RegExp(/0\d+/);
break;
}
if (!postcode.match(regex)) {
errMsg = errMsg + "State and postcode do not match\n";
result = false;
}
if (errMsg) {
alert(errMsg);
}
if (result) {
storeBooking(
fname,
lname,
email,
phone,
streetname,
suburb,
state,
postcode,
productquantity
);
}
return result;
}
function storeBooking(
fname,
lname,
email,
phone,
streetname,
suburb,
state,
postcode,
productquantity
) {
sessionStorage.fname = fname;
sessionStorage.lname = lname;
sessionStorage.email = email;
sessionStorage.phone = phone;
sessionStorage.streetname = streetname;
sessionStorage.suburb = suburb;
sessionStorage.state = state;
sessionStorage.postcode = postcode;
sessionStorage.productquantity = productquantity;
}
// this stores values inside of sessionStorage
function init() {
var regForm = document.getElementById("regform"); // get ref to the HTML element
regForm.onsubmit = validate; //register the event listener
}
window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/part2.js"></script>
<title>SwinTech</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="enquiriespage">
<header>
<div class="main">
<div class="logo">
<img src="logo.png" alt="logo">
</div>
<ul>
<li>Home</li>
<li>Products</li>
<li class="active">Enquiries</li>
<li>About</li>
</ul>
</div>
</header>
</body>
<section class="enquirything">
<div class="containerr">
<form action="payment.html" id="regform" method="post">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" required="required" placeholder="Your name.." maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="fname" required="required" placeholder="Your last name.." onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
<label for="email">Email Address</label>
<br>
<br>
<input type="email" id="email" name="emailadd" required="required" placeholder="Your email address..">
<br>
<br>
<label for="phone">Phone Number</label>
<br>
<br>
<input type="text" id="phone" name="txtChar" required="required" placeholder="e.g. 0451124561" maxlength="10">
<br>
<br>
<h1>Address</h1>
<br>
<label for="streetname">Street Address</label>
<input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40"/>
<label for="suburb">Suburb/Town</label>
<input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
<label for="state">Choose a state:</label>
<br>
<select name="state" id="state" required="required">
<option value="">Please Select</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="ACT">ACT</option>
</select>
<br>
<label for="postcode">Postcode</label>
<input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
<fieldset>
<br>
<h1>Product Selection</h1>
<br>
<label for="productselection">Please select the product:</label>
<br>
<select id="productselection" name="Product" >
<option value="none">Please Select a Product</option>
<option value="Workstation-Laptop">Workstation Laptop</option>
<option value="Gaming-Laptop">Gaming Laptop</option>
<option value="Laptop-Stand">Laptop Stand</option>
<option value="Office-Laptop">Office Laptop</option>
</select>
<br>
<h1>Amount of Product:</h1>
<section>
<br>
<input type="number" id="productquantity" />
<br>
</section>
</fieldset>
<br>
<input type="submit" value="Pay Now"> <input type="reset" value="Reset" />
</fieldset>
</form>
</div>
</section>
<div class="footer">
<div class="footer-content"></div>
<div class="footer-bottom"></div>
© swintech.com | Designed by Bilal El-leissy
</div>
</html>
The code looks fine, but judging by this code, I'm taking a stab in the dark and saying you're hitting a security error, likely due to not serving the file, and using file:// in the browser instead of http[s]:// . You can see the proper error if you halt the code from completing the submit.
function validate(event) {
event.preventDefault();
From MDN:
The request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the file: or data: scheme, for example). For example, the user may have their browser configured to deny permission to persist data for the specified origin.
I heard that NaN errors are when you are trying to pass an object as a number, yet in my HTML, 'productquantity' is set as a number, so why is it giving me this error? These files operate with another HTML file and another JavaScript file to retrieve data and these 2 display the data. 'productquantity is what is my only hurdle and where the NaN error comes up. If you need the other HTML and Javascript file, please let me know. Thanks in advance!
"use strict";
function getBooking() {
var laptopsprice = 0;
if (sessionStorage.fname != undefined) { //if sessionStorage for username is not empty
//confirmation text
//outputs user details in payment page and stores values to be sent to server in hidden input tags
document.getElementById("confirm_name").textContent = sessionStorage.fname + " " + sessionStorage.lname;
document.getElementById("confirm_email").textContent = sessionStorage.email;
document.getElementById("confirm_phone").textContent = sessionStorage.phone;
document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
document.getElementById("confirm_state").textContent = sessionStorage.state;
document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
document.getElementById("confirm_laptops").textContent = sessionStorage.laptops;
document.getElementById("confirm_productquantity").textContent = Number(sessionStorage.productquantity);
document.getElementById("confirm_cost").textContent = laptopsprice;
laptopsprice = totalproductcost(sessionStorage.laptops, Number(sessionStorage.productquantity));
//values for hidden input tags that send data to the server
document.getElementById("a_name").value = sessionStorage.fname + " " + sessionStorage.lname;
document.getElementById("a_email").value = sessionStorage.email;
document.getElementById("a_phone").value = sessionStorage.phone;
document.getElementById("a_streetname").value = sessionStorage.streetname;
document.getElementById("a_suburb").value = sessionStorage.suburb;
document.getElementById("a_state").value = sessionStorage.state;
document.getElementById("a_postcode").value = sessionStorage.postcode;
document.getElementById("a_laptops").textContent = sessionStorage.laptops;
document.getElementById("a_productquantity").textContent = Number(sessionStorage.productquantity);
document.getElementById("a_cost").value = laptopsprice;
}
}
function totalproductcost(laptops , productquantity) {
var laptopsprice;
if (laptops == "Workstation_Laptop") {
laptopsprice = (productquantity * 2499);
} else if (laptops == "Gaming_Laptop") {
laptopsprice = (productquantity * 1789);
} else if (laptops == "Laptop_Stand") {
laptopsprice = (productquantity * 64);
} else if (laptops == "Office_Laptop") {
laptopsprice = (productquantity * 1499);
}
return laptopsprice;
}
function cancelBooking(){
window.location = "enquiries.html";
sessionStorage.clear();
}
//function for invoking getbooking and validate, cancel booking
function init() {
document.getElementById("paymentform").onsubmit = validate;
document.getElementById("cancelpurchase").addEventListener("click", cancelBooking);
getBooking();//invokes getbooking function
}
//invokes init fuction on window load
window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/payment.js"></script>
<title>SwinTech</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> </head>
<header class="enquiriespage">
<div class="main">
<div class="logo"> <img src="logo.png" alt="logo"> </div>
<ul>
<li>Home</li>
<li>Products</li>
<li>Enquiries</li>
<li class="active">>Payment</li>
<li>About</li>
</ul>
</div>
</header>
<section class="paymentthing">
<div class="paymentcontainer">
<fieldset>
<legend>Order Summary:</legend>
<p>Your Name: <span id="confirm_name"></span></p>
<p>Your Email: <span id="confirm_email"></span></p>
<p>Your Phone Number: <span id="confirm_phone"></span></p>
<p>Street name: <span id="confirm_streetname"></span></p>
<p>Suburb: <span id="confirm_suburb"></span></p>
<p>State: <span id="confirm_state"></span></p>
<p>Postcode: <span id="confirm_postcode"></span></p>
<p>Product: <span id="confirm_laptops"></span></p>
<p>Product Quantity: <span id="confirm_productquantity"></span></p>
<p>Total Cost: $<span id="confirm_cost"></span></p>
<input type="hidden" name="name" id="a_name" />
<input type="hidden" name="email" id="a_email" />
<input type="hidden" name="phone" id="a_phone" />
<input type="hidden" name="streetname" id="a_streetname" />
<input type="hidden" name="suburb" id="a_suburb" />
<input type="hidden" name="state" id="a_state" />
<input type="hidden" name="cost" id="a_cost" />
<input type="hidden" name="laptops" id="a_laptops" />
<input type="hidden" name="postcode" id="a_postcode" />
<input type="hidden" name="productquantity" id="a_productquantity" />
</fieldset>
<br>
<br>
<form id="paymentform" method="post" action="https://mercury.swin.edu.au/it000000/formtest.php">
<label for="cardType">Please Choose a Card Type:</label>
<br>
<br>
<select name="cardType" id="cardType" required="required">
<option value="">Please Select</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">AmEx</option>
</select>
<br>
<br>
<label for="cardName" id="cardName">Please Enter Name On Card:</label>
<input type="text" name="cardName" maxlength="40" required="required">
<br>
<br>
<label>Please Enter Credit Card Expiration Date:</label> <span class="expiration">
<input type="tel" name="month" placeholder="MM" maxlength="2" size="2" required="required" />
<span>/</span>
<input type="tel" name="year" placeholder="YY" maxlength="2" size="2" required="required" /> </span>
<br>
<br>
<br>
<label for="cardNo">Credit Card Number:</label>
<input id="cardNo" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required="required">
<br>
<br>
<input type="submit" value="Check Out">
<br>
<br>
<button type="button" id="cancelpurchase">Cancel Purchase</button>
</form>
</div>
</section>
<div class="footer">
<div class="footer-content"></div>
<div class="footer-bottom"></div> © swintech.com | Designed by Bilal El-leissy </div>
</html>
Anytime you retrieve or set a value to go in a html tag or form element it is a string. Even if you cast that item as a Number(), the DOM will store it as a string. Whenever that string is to be used in a calculation, convert it to a number then with the plus operator, parseInt or parseFloat, as in:
function totalproductcost(laptops , productquantity) {
productquantity = +productquantity;
// OR productquantity = parseInt(productquantity);
// OR productquantity = parseFloat(productquantity); if you have a decimal to consider
var laptopsprice;
if (laptops == "Workstation_Laptop") {
laptopsprice = (productquantity * 2499);
} else if (laptops == "Gaming_Laptop") {
laptopsprice = (productquantity * 1789);
} else if (laptops == "Laptop_Stand") {
laptopsprice = (productquantity * 64);
} else if (laptops == "Office_Laptop") {
laptopsprice = (productquantity * 1499);
}
return laptopsprice;
}
There are two things you might want to check for.
One is that productquantity has a value. If it's undefined or null, Number will return NaN.
The other is that if productquantity is being set as a string, that the string doesn't contain non-numerical characters.
Adding ".value" to the input helped me
My find matches function does not seem to be working.
I want to get an array ([]) element by id and do comparisons with it.
The function is supposed to go into the array and generate a random person, then display the match in the text area "showmatches".
I am not sure if the random person is being generated nor if the criteria are being matched in the comparison.
<html>
<head>
<script>
var records = [];
function calculateAge()
{
var dob = document.getElementById('dob').value;
var dobInput = new Date(dob);
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDate();
var birthyear = dobInput.getFullYear();
var birthmonth = dobInput.getMonth();
var birthday = dobInput.getDate();
var bYear = year - birthyear;
var bMonth = month - birthmonth;
var bDay = day - birthday;
if (bYear < 18 || bYear > 75)
{
alert("Age cannot be less than 18 or greater than 75");
return false;
}else{
document.getElementById("age").value = bYear + "years old";
}
//document.getElementById("age").value = bYear + "years old";
}
function showAll()
{
show = document.getElementById("showallpersons").innerHTML=records;
show.value = records.join("\n");
}
(window.onload = () => {
var findmatches=document.getElementById('findmatches');
if(findmatches){
findmatches.addEventListener('click', findMatches, false);
}
function findMatches(e)
{
e.preventDefault();
for(var counter=0; counter<records.length; counter++)
{
var currposn = records[counter].value;
var show = document.getElementById("showallmatches").innerHTML= currposn.fname + currposn.lname;
show.value = currposn.join("\n");
do
{
//From here
var randpson = Math.random() * records.length;
randpson = Math.floor(randpson); //To here works, I know that for sure
//I'm not sure if the conditions for the if statements are correct
if(((randpson.age - currposn.age) <= 10) || ((randpson.age - currposn.age) >= 20))
{
if(((randpson.height - currposn.height) <= 10) || ((randpson.height - currposn.height) >= 20))
{
var display = document.getElementById("showmatches").innerHTML= "Matched to: " +randpson.fname + randpson.lname;
//display.value = "Matched to: " + randpson.fname + randpson.lname;
break;
}
}
} while(counter < 10){
//var newDisplay = document.getElementById("showallmatches").innerHTML= null;
}
//console.log(findMatches());
}
}
})()
(window.onload = () => {
var submit = document.getElementById('submit');
if(submit){
submit.addEventListener('click', addnew, false);
}
function addnew(event)
{
//Prevents default submit event
event.preventDefault();
//Accept values entered in form
var fname = document.getElementById('fname').value;
var mname = document.getElementById('mname').value;
var lname= document.getElementById('lname').value;
var dob= document.getElementById('dob').value;
var gender = document.forms['Information']['gender'].value;
var age = document.getElementById('age').value;
parseInt(age);
var bodyType = document.getElementById('Body Type').value;
var occu= document.getElementById('occu').value;
var height= document.getElementById('height').value;
if (fname==null || fname=="")
{
alert("A first name is required");
return false;
}
if(mname==null || mname=="")
{
alert("A middle initial is required");
return false;
}
if (lname==null || lname=="")
{
alert("A last name is required");
return false;
}
if(dob==null || dob=="")
{
alert("A DOB is required");
return false;
}
if (gender == "")
{
alert("Please select a gender");
return false;
}
if(height <= 170 || height >= 200)
{
alert("A height between 170, not less and 200, not more is required");
return false;
}
if(bodyType==null || bodyType==""){
alert("Please choose a body type");
return false;
}
if(occu==null || occu=="")
{
alert("Please enter an occupation");
return false;
}
//Append To array
records.push(fname);
records.push(mname);
records.push(lname);
records.push(gender);
records.push(age);
records.push(bodyType);
records.push(occu);
records.push(height);
for(i=0;i<records.length;i++)
{
console.log(records[i]);
}
document.getElementById("Information").reset();
}
})()
</script>
</head>
<body>
<div class="wrapper">
<header class="page-header">
<nav>
<button class="cta-contact">Contact Us</button>
</nav>
</header>
</div>
<div class="space">
<h1>
<marquee behavior="scroll" direction="right">What are you waiting for? Find your "one" now.</marquee>
</h1>
</div>
<div class="container">
<form name="Information" id="Information">
<fieldset>
<legend>Personal Information</legend>
First Name:
<input id="fname" type="text" size=40 placeholder='First Name' minlength=4 maxlength=40 required />
<br/><br/>
Middle Initial:
<input id="mname" type="text" size=3 placeholder='M Intial' maxlength=1 required />
<br/><br/>
Last Name:
<input id="lname" type="text" size='40' placeholder='Last Name' minlength='4' maxlength='40' required />
<br/><br/>
Date of Birth
<input id="dob" type="date" onchange="calculateAge()"/>
<br/><br/>
Gender:
<input id="male" type="radio" value='M' name="gender" required/> Male
<input id="female" type="radio" value='F' name="gender" required/> Female
<br/><br/>
Age: <input type="text" id="age" disabled />
<br/>
Body Type:
<select id="Body Type">
<optgroup label="Female" id="FemaleOpt">
<option value="Apple"> Apple </option>
<option value="Pear"> Pear </option>
<option value="Pencil"> Pencil </option>
<option value="Hourglass"> Hourglass </option>
<option value="Round"> Round </option>
</optgroup>
<optgroup label="Male" id="MaleOpt">
<option value="Oval"> Oval </option>
<option value="Triangle"> Triangle </option>
<option value="Rectangle"> Rectangle </option>
<option value="Rhomboid">Rhomboid </option>
<option value="Inverted">Inverted Triangle</option>
</optgroup>
</select>
<br/><br/>
Occupation:
<input id="occu" type="text" size=30 maxlength=30 required />
<br/><br/>
Height(in cm):
<input id="height" type="number" size="3" min="171" max="199" value="" required /><br>
<br/><br/>
<textarea id="showallpersons" name="Show All Persons" onclick="showAll()" disabled></textarea>
<textarea id="showmatches" name="Show All Matches" onclick="findMatches()" disabled></textarea>
<br/><br/>
<button id="submit" type="submit">Submit</button>
<button id="findmatches" type="button">Find Matches</button>
</fieldset>
</form>
</div>
</body>
</html>
Do these steps. First you have two window.onload = () (As you are not using addEventListener only one event will be attached).
Steps:
Keep everything intact, just remove the window.onload from both places. Keep all code inside load intact.
Move the entire code block just to the bottom of the html above closing tag. (Doing so, will make window.onload redundant.)
Put console.log() in the click handler and see if it's working (it will)
Let us know.
NOTE: On other hand there are better way to code this, for e.g wait for DOMContentLoaded for attaching event etc., but it's too big to discuss here. First make this work, then we can recommend better approaches.
I am currently doing a unit task and am having trouble working out why my javascript wont connect. i have tried a few things but cant seem to work it out. Im sure its easy but i just cant work it out. an explanation would be great too.
There are two files one html and one javascript.
Thanks in advance
HTML
<script src="validate.js"></script>
</head>
<body>
<header>
<h1>Rohirrim Ranch Tours</h1>
<h2>Booking Form</h2>
</header>
<form id="regform" method="post"
action="https://mercury.swin.edu.au/it000000/formtest.php"
novalidate="novalidate">
<fieldset id="person">
<legend>Your details:</legend>
<p><label for="firstname">Enter your first name</label>
<input type="text" name="firstname" id="firstname" size="20"
/>
</p>
<p><label for="lastname">Enter your last name</label>
<input type="text" name="lastname" id="lastname" size="20" />
</p>
<fieldset id="species">
<legend>Species:</legend>
<label for="human">Human</label>
<input type="radio" name="species" id="human"
value="Human"/><br />
<label for="dwarf">Dwarf</label>
<input type="radio" name="species" id="dwarf"
value="Dwarf" /><br />
<label for="elf">Elf</label>
<input type="radio" name="species" id="elf"
value="Elf" /><br />
<label for="hobbit">Hobbit</label>
<input type="radio" name="species" id="hobbit"
value="Hobbit" /><br />
</fieldset>
<p><label for="age">Enter your age</label>
<input type="text" id="age" name="age" size="5">
</p>
<p><label for="beard">Enter your beard length in inches</label><br />
0 <input type="range" id="beard" name="beard" min="0"
max="60"> 60
</p>
</fieldset>
<fieldset id="trip">
<legend>Your trip:</legend>
<fieldset>
<legend>Booking:</legend>
<label for="1day">1 Day Tour - $200 </label>
<input type="checkbox" name="1day" id="1day"
value="1day" /><br />
<label for="4day">4 Day Tour - $1500</label>
<input type="checkbox" name="4day" id="4day"
value="4day" /><br />
<label for="10day">10 Day Tour - $3000</label>
<input type="checkbox" name="10day" id="10day"
value="10day" /><br />
</fieldset>
<p>
<label for="food">Menu preferences</label>
<select name="food" id="food">
<option value="none">Please select</option>
<option value="lembas">Lembas</option>
<option value="mushrooms">Mushrooms</option>
<option value="ent">Ent Draft</option>
<option value="cram">Cram</option>
</select>
</p>
<p>
<label for="partySize">Number of Travellers</label>
<input type="text" id="partySize" name="partySize"
maxlength="3" size="3" />
</p>
</fieldset>
<div id="bottom"> </div>
<p><input type="submit" value="Book Now!" />
<input type="reset" value="Reset" />
</p>
</form>
JAVASCRIPT
"use strict";
function validate() {
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var errMsg = "";
var result = true;
if (!firstname.match(/^[a-zA-Z]+$/)) {
errMsg = errMsg + "Your first name must only contain alpha
characters\n";
result = false; }
if (!lastname.match(/^[a-zA-Z+$]/)){
errMsg = errMsg + "Your last name must only contain alpha
characters\n";
result = false;
}
var age = document.getElementById("age").value;
if (isNaN(age)){
errMsg = errMsg + "your age must be a number\n"
result = false;
}
else if (age < 18) {
errMsg = errMsg +" your age must be 18 or older\n";
result = false;
}
else if (age >= 10000) {
errMsg = errMsg + "your age must be between 18 and 10000\n";
result = false;
}
var partySize = document.getElementById("partySize").value;
if (isNaN(partySize)) {
errMsg = errMsg + "your age must be a number\n"
result = false;
}
else if (partySize < 1) {
errMsg = errMsg +" party size must be greater than 0\n";
result = false;
}
else if (age >= 100) {
errMsg = errMsg + "your party size must be less or equal to 100\n";
result = false;
}
if (erMsg !== ""){
alert(errMsg);
}
return result;
}
function init() {
var regForm = document.getElementById("regform");
regForm.onsubmit = validate;
}
window.onload = init;
I see your error erMsg instead of errMsg
if (erMsg !== ""){
alert(errMsg);
}
and also add event.preventDefault(); at the beginning of the validate function
Your js reference is fine :)
Try setting the Javascript url as './validate.js'
On the 82 line of my JavaScript I have "document.getElementById("errors").innerHTML = errMsg;" this code and I was wondering how to implement it into my HTML page so when the validation isn't correct the error message will be displayed in the correct place such as when someone is younger then 15 the error message will be displayed next to date of birth. At the moment I have my errors appearing in an alert but I'd like them to appear on the web page. I also when to know if my "storeForm" and "prefillForm" functions are correct because I tried to test them and it doesn't seem to work. How do I go about fixing these?
"use strict";
/*get variables from form and check rules*/
function validate() {
var errMsg = ""; /* stores the error message */
var result = true; /* assumes no errors */
//var JobID = document.getElementById("JobID").value;
var firstName = document.getElementById("firstName").value;
var familyName = document.getElementById("familyName").value;
var midName = document.getElementById("midName").value;
var male = document.getElementById("male").checked;
var female = document.getElementById("female").checked;
var street = document.getElementById("street").value;
var suburb = document.getElementById("suburb").value;
var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;
var postcode = document.getElementById("postcode").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var XML = document.getElementById("XML").checked;
var Java = document.getElementById("Java").checked;
var Python = document.getElementById("Python").checked;
var SQL = document.getElementById("SQL").checked;
var PERL = document.getElementById("PERL").checked;
var MySQL = document.getElementById("MySQL").checked;
var Windows = document.getElementById("Windows").checked;
var UNIX = document.getElementById("UNIX").checked;
var Linux = document.getElementById("Linux").checked;
var other = document.getElementById("other").checked;
var otherText = document.getElementById("otherText").value;
var dob = document.getElementById("dob").value.split("/");
var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);
var today = new Date();
var age = today.getFullYear() - date.getFullYear();
//get varibles from form and check rules here
// if something is wrong set result = false, and concatenate error message
if (age >= 80) { // Outside age ranges.
errMsg = errMsg + "You must be 80 or younger to apply for this job\n";
result = false;
}
if (age <= 15) { // Outside age ranges.
errMsg = errMsg + "You must be 15 or older to apply for this job\n";
result = false;
}
if (!(postcode.charAt(0) == 3 || postcode.charAt(0) == 8) && state == "VIC") {
errMsg = errMsg + "Your state and postcode do not match. State VIC postcodes must start with a 3 or 8\n";
result = false;
} else if (!(postcode.charAt(0) == 1 || postcode.charAt(0) == 2) && state == "NSW") {
errMsg = errMsg + "Your state and postcode do not match. State NSW postcodes must start with a 1 or 2\n";
result = false;
} else if (!(postcode.charAt(0) == 4 || postcode.charAt(0) == 9) && state == "QLD") {
errMsg = errMsg + "Your state and postcode do not match. State QLD postcodes must start with a 4 or 9\n";
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "NT") {
errMsg = errMsg + "Your state and postcode do not match. State NT postcodes must start with a 0\n";
result = false;
} else if (!(postcode.charAt(0) == 6) && state == "WA") {
errMsg = errMsg + "Your state and postcode do not match. State WA postcodes must start with a 6\n";
result = false;
} else if (!(postcode.charAt(0) == 5) && state == "SA") {
errMsg = errMsg + "Your state and postcode do not match. State SA postcodes must start with a 5\n";
result = false;
} else if (!(postcode.charAt(0) == 7) && state == "TAS") {
errMsg = errMsg + "Your state and postcode do not match. State TAS postcodes must start with a 7\n";
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "ACT") {
errMsg = errMsg + "Your state and postcode do not match. State ACT postcodes must start with a 0\n";
result = false;
} else {
result = true;
}
if (other && document.getElementById("otherText").value.trim().length === 0) {
errMsg = errMsg + "You have selected other skills, you must enter one other skill in the text box\n";
result = false;
}
if (errMsg != "") { //only display message box if there is something to show
alert(errMsg);
//document.getElementById("errors").innerHTML = errMsg;
}
if (result == true) {
storeForm(firstName, familyName, midName, dob, male, female, street, suburb, state, postcode, email, number, XML, Java, Python, SQL, PERL, MySQL, Windows, UNIX, Linux, other, otherText)
}
return result; //if false the information will not be sent to the server
}
function storeForm(firstName, familyName, midName, dob, male, female, street, suburb, state, postcode, email, number, XML, Java, Python, SQL, PERL, MySQL, Windows, UNIX, Linux, other, otherText) {
//get values and assign them to sessionStorage attribute.
//we use the same name for the attrubute and the element id to avoid confustion
sessionStorage.firstName = firstName;
sessionStorage.familyName = familyName;
sessionStorage.midName = midName;
sessionStorage.dob = dob;
sessionStorage.male = male;
sessionStorage.female = female;
sessionStorage.street = street;
sessionStorage.suburb = suburb;
sessionStorage.state = state;
sessionStorage.postcode = postcode;
sessionStorage.email = email;
sessionStorage.number = number;
sessionStorage.XML = XML;
sessionStorage.Java = Java;
sessionStorage.Python = Python;
sessionStorage.SQL = SQL;
sessionStorage.PERL = PERL;
sessionStorage.MySQL = MySQL;
sessionStorage.Windows = Windows;
sessionStorage.UNIX = UNIX;
sessionStorage.Linux = Linux;
sessionStorage.other = other;
sessionStorage.otherText = otherText;
}
/* check if session day on user exists and if so prefill the form*/
function prefillForm() {
if (sessionStorage.firstName != undefined) {
document.getElementById("firstName").value = sessionStorage.firstName;
document.getElementById("familyName").value = sessionStorage.familyName;
document.getElementById("midName").value = sessionStorage.midName;
document.getElementById("dob").value = sessionStorage.dob;
if (sessionStorage.male == ("true")) {
document.getElementById("male").checked = true;
}
if (sessionStorage.female == ("true")) {
document.getElementById("female").checked = true;
}
document.getElementById("street").value = sessionStorage.street;
document.getElementById("suburb").value = sessionStorage.suburb;
document.getElementById("state").value = sessionStorage.state;
document.getElementById("postcode").value = sessionStorage.postcode;
document.getElementById("email").value = sessionStorage.email;
document.getElementById("number").value = sessionStorage.number;
if (sessionStorage.XML == ("true")) {
document.getElementById("XML").checked = true;
}
if (sessionStorage.Java == ("true")) {
document.getElementById("Java").checked = true;
}
if (sessionStorage.Python == ("true")) {
document.getElementById("Python").checked = true;
}
if (sessionStorage.SQL == ("true")) {
document.getElementById("SQL").checked = true;
}
if (sessionStorage.PERL == ("true")) {
document.getElementById("PERL").checked = true;
}
if (sessionStorage.MySQL == ("true")) {
document.getElementById("MySQL").checked = true;
}
if (sessionStorage.Windows == ("true")) {
document.getElementById("Windows").checked = true;
}
if (sessionStorage.UNIX == ("true")) {
document.getElementById("UNIX").checked = true;
}
if (sessionStorage.Linux == ("true")) {
document.getElementById("Linux").checked = true;
}
if (sessionStorage.other == ("true")) {
document.getElementById("other").checked = sessionStorage.other;
}
document.getElementById("otherText").value = sessionStorage.otherText;
}
}
function referenceNum1() {
//this function defines the local storage for the first job
localStorage.JobID = "QM593";
}
function referenceNum2() {
//this function defines the local storage for the second job;
localStorage.JobID = "CS197";
}
function init() {
var path = window.location.pathname;
var page = path.split("/").pop();
if (page == "apply.html") {
var regForm = document.getElementById("regform"); // get ref to the HTML element
window.onload = prefillForm();
regForm.onsubmit = validate; //register the event listener
//this puts the job id into the field
document.getElementById("JobID").value = localStorage.JobID;
} else {
//this makes it so that the 2 different functions run when the hyperlinks are clicked
var job1 = document.getElementById("job1");
var job2 = document.getElementById("job2");
var JobID
job1.onclick = referenceNum1;
job2.onclick = referenceNum2;
}
}
window.onload = init;
<article>
<header>
<h1>The Virtual World</h1>
<nav>
<p class="menu">Home</p>
<p class="menu">Jobs</p>
<p class="menu">Apply</p>
<p class="menu">About</p>
<p class="menu">Enhancements</p>
</nav>
</header>
<section id="required">
<h5>All fields with * are required</h5>
</section>
<form id="regform" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php">
<fieldset>
<legend>Job Application</legend>
<p><label for="JobID">*Job ID:</label>
<input type="text" name="JobID" id="JobID" maxlength="5" size="10" pattern="^[a-zA-Z]{2}[0-9]{3}$" required="required" /></p>
<section id="choose">
<h5>Please choose from QM593 or CS197</h5>
</section>
<fieldset>
<legend>Personal Details</legend>
<p><label for="title">*Title:</label>
<select name="title" id="title" required="required">
<option value="">Please Select</option>
<option value="title">Dr</option>
<option value="title">Mr</option>
<option value="title">Miss</option>
<option value="title">Mrs</option>
<option value="title">Ms</option>
</select></p>
<p><label for="firstName">*First Name:</label>
<input type="text" name="firstName" id="firstName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" />
<label for="familyName">*Family Name:</label>
<input type="text" name="familyName" id="familyName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" /></p>
<p><label for="midName">Middle Name:</label>
<input type="text" name="midName" id="midName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" /></p>
<p><label for="dob">*Date of Birth:</label>
<input type="text" name="dob" id="dob" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" maxlength="10" size="10" required="required" /></p>
<p>*Gender:
<label for="male">Male</label>
<input type="radio" id="male" name="sex" value="male" required="required" />
<label for="female">Female</label>
<input type="radio" id="female" name="sex" value="female" required="required" /></p>
<p><label for="street">*Street Address:</label>
<input type="text" name="street" id="street" maxlength="40" size="30" required="required" /></p>
<p><label for="suburb">*Suburb/town:</label>
<input type="text" name="suburb" id="suburb" maxlength="40" size="20" required="required" /></p>
<p><label for="state">*State:</label>
<select name="state" id="state" required="required">
<option value="">Please Select</option>
<option value="state">VIC</option>
<option value="state">NSW</option>
<option value="state">QLD</option>
<option value="state">NT</option>
<option value="state">WA</option>
<option value="state">SA</option>
<option value="state">TAS</option>
<option value="state">ACT</option>
</select></p>
<p><label for="postcode">*Postcode:</label>
<input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" /></p>
<p><label for="email">*Email:</label>
<input type="email" name="email" id="email" size="30" required="required" /></p>
<p><label for="number">*Phone number:</label>
<input type="tel" name="number" id="number" minlength="8" maxlength="12" size="10" required="required" /></p>
<p>Skill list:</p>
<p><label for="C/C+">C/C+</label>
<input type="checkbox" id="C/C+" name="category[]" checked="checked" /></p>
<p><label for="XML">XML</label>
<input type="checkbox" id="XML" name="category[]" /></p>
<p><label for="Java">Java</label>
<input type="checkbox" id="Java" name="category[]" /></p>
<p><label for="Python">Python</label>
<input type="checkbox" id="Python" name="category[]" /></p>
<p><label for="SQL">SQL</label>
<input type="checkbox" id="SQL" name="category[]" /></p>
<p><label for="PERL">PERL</label>
<input type="checkbox" id="PERL" name="category[]" /></p>
<p><label for="MySQL">MySQL</label>
<input type="checkbox" id="MySQL" name="category[]" /></p>
<p><label for="Windows">Windows</label>
<input type="checkbox" id="Windows" name="category[]" /></p>
<p><label for="UNIX">UNIX</label>
<input type="checkbox" id="UNIX" name="category[]" /></p>
<p><label for="Linux">Linux</label>
<input type="checkbox" id="Linux" name="category[]" /></p>
<p><label for="other">Other Skills:</label>
<input type="checkbox" id="other" name="category[]" /></p>
<textarea id="otherText" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>
</p>
</fieldset>
</fieldset>
<input type="submit" value="Apply" />
<input type="reset" value="Reset Application" />
</form>
</article>
you may create a generic function like that :
function show_error(element, message) {
element.parentElement.innerHTML += "<span class='error'>" + message + "</span>";
}
//call the function
show_error(document.getElementById('street'), 'error message');
.error {
color: red;
}
<p><label for="street">*Street Address:</label>
<input type="text" name="street" id="street" maxlength="40" size="30" required="required" /></p>
<p><label for="suburb">*Suburb/town:</label>
<input type="text" name="suburb" id="suburb" maxlength="40" size="20" required="required" /></p>
Then you can add another function to remove this error.
You can do the below to update when there is an error. I have added a small code to demonstrate.
$(document).ready(function() {
$("#btn").click(function() {
validate();
});
});
function validate() {
var errMsg = "";
var date = new Date($('#dpDoB').val());
var today = new Date();
var age = today.getFullYear() - date.getFullYear();
if (age >= 80) { // Outside age ranges.
errMsg = errMsg + "You must be 80 or younger to apply for this job\n";
$("#dob").append("<span>" + errMsg + "</span>");
result = false;
}
if (age <= 15) { // Outside age ranges.
errMsg = errMsg + "You must be 15 or older to apply for this job\n";
$("#dob").append("<span>" + errMsg + "</span>");
result = false;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id="form">
<div id="dob">
<input id="dpDoB" type="date" />
</div>
<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>
</div>