I am trying to develop some JS that will allow a form to change the value of a submitted radio button based on the users age. Essentially, if the user is 13yo or younger AND selected radio1 value of '100', it should change the '100' to a blank.
Below is the code. No matter what i do, it seems to always see the user as being over the age of 13. Any help is appreciated!
var ofAge = "N"
function checkAge() {
var monInput = document.querySelector("#i_date_of_birth_month").value
var dayInput = document.querySelector("#i_date_of_birth_day").value
var yearInput = document.querySelector("#i_date_of_birth_year").value
var dateString = monInput + ", " + dayInput + ", " + yearInput
var birthDate = new Date(dateString);
var todayDate = new Date()
var age = todayDate.getFullYear() - birthDate.getFullYear();
var m = birthDate.getMonth() - todayDate.getMonth()
if (m < 0) {
age--
}
if (age > 13) {
ofAge = "Y"
} else if (age == 13) {
var d = birthDate.getDate() - todayDate.getDate()
if (d >= 0) {
ofAge = "Y"
} else {
ofAge = "N"
}
}
if (ofAge == "N") {
document.querySelector("#radio1").value = ""
} else {
document.querySelector("#radio1").value = "100"
}
}
document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge)
document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge)
document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge)
You need to add else
statement if age is less than 13.
} else { ofAge = "N"; }
var ofAge = "N" function checkAge() { var monInput = document.querySelector("#i_date_of_birth_month").value var dayInput = document.querySelector("#i_date_of_birth_day").value var yearInput = document.querySelector("#i_date_of_birth_year").value var dateString = monInput + ", " + dayInput + ", " + yearInput var birthDate = new Date(dateString); var todayDate = new Date() var age = todayDate.getFullYear() - birthDate.getFullYear(); var m = birthDate.getMonth() - todayDate.getMonth() if (m < 0) { age-- } age = parseFloat(age); if (age > 13) { ofAge = "Y" } else if (age == 13) { var d = birthDate.getDate() - todayDate.getDate() if (d >= 0) { ofAge = "Y" } else { ofAge = "N" } } else { ofAge = "N"; } if (ofAge == "N") { document.querySelector("#radio1").value = "" } else { document.querySelector("#radio1").value = "100" } } document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge)
<input type="text" name="" id="i_date_of_birth_day"> <input type="text" name="" id="i_date_of_birth_month"> <input type="text" name="" id="i_date_of_birth_year"> <input type="radio" name="" id="radio1"> <input type="radio" name="" id="radio2">
The date string you are creating (with commas) is not in the correct format. But it would be better to set the day, month, and year directly
var monInput = document.querySelector("#i_date_of_birth_month").value
var dayInput = document.querySelector("#i_date_of_birth_day").value
var yearInput = document.querySelector("#i_date_of_birth_year").value
This is where your problem is I believe.
var dateString = monInput + ", " + dayInput + ", " + yearInput
Instead, you should create a default Date(), and use setFullYear, setMonth (warning: months in javascript are 0 based) and setDate
Building on @tech2017's answer , you also need to change the way you're processing the date. Instead of commas and spaces, use a hyphen ( -
) in between each field to build the date object.
See the code below for @tech2017's answer modified to correctly build the date. The console.log()
calls are in there so you can see what's being generated and changed.
var ofAge = "N" function checkAge() { var monInput = document.querySelector("#i_date_of_birth_month").value var dayInput = document.querySelector("#i_date_of_birth_day").value var yearInput = document.querySelector("#i_date_of_birth_year").value var dateString = monInput + "-" + dayInput + "-" + yearInput console.log("dateString: " + dateString); var birthDate = new Date(dateString); console.log("birthDate: " + birthDate); var todayDate = new Date() var age = todayDate.getFullYear() - birthDate.getFullYear(); var m = birthDate.getMonth() - todayDate.getMonth() if (m < 0) { age-- } age = parseFloat(age); if (age > 13) { ofAge = "Y" } else if (age == 13) { var d = birthDate.getDate() - todayDate.getDate() if (d >= 0) { ofAge = "Y" } else { ofAge = "N" } } else { ofAge = "N"; } if (ofAge == "N") { document.querySelector("#radio1").value = "" } else { document.querySelector("#radio1").value = "100" } console.log("radio1 value = " + document.querySelector("#radio1").value); } document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge)
<input type="text" name="" id="i_date_of_birth_day"> <input type="text" name="" id="i_date_of_birth_month"> <input type="text" name="" id="i_date_of_birth_year"> <input type="radio" name="" id="radio1"> <input type="radio" name="" id="radio2">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.