I'm trying to use a form tag with document.getElementById, but I am having issues with having the Javascript retrieve the values from my inputs. Or maybe something else is completely wrong and I'm just stupid.
HTML:
<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">
<input type="submit" name="submit">
</form>
JS:
function testMonth() {
var month = document.getElememtById('month').value;
if(month == July || month == August) {
document.getElementById('price').innerHTML = "$150";
}
else {
if(month == null) {
alert('Please fill out the month field');
}
else {
testAge();
}
}
}
function testAge() {
var age = document.getElementById('age').value;
if(age == null) {
alert('Please fill out the age field');
}
else {
if(age < 5 || age > 90) {
alert('Visiters must be between the ages of 5 and 90');
}
else {
if (age == 10 || age == 90) {
testCoupon();
}
else {
if (age < 18 || age == 18) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
}
}
function testCoupon() {
var coupon = document.getElementById('coupon').value;
if (coupon == "YEET") {
document.getElementById('price').innerHTML = "$0";
}
else {
if (document.getElementById('age').value == 10) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
When I fill out the fields on the website and hit sumbit, the site just refreshes, which makes me think that the submit button/form syntax is wrong. However, the issue could also be that I have written the JS wrong, and it's not retrieving the value of the form inputs.
I found 3 bugs in your code. First you should use
event.preventDefault()
as second in your first if statement inside testMonth function you are checking July and August but you do not have that variables. You should check as string or create variable for them and last one you have typo in getElementById again in first part of testMonth function
function testMonth() {
event.preventDefault()
var month = document.getElementById('month').value;
if(month == 'July' || month == 'August') {
document.getElementById('price').innerHTML = "$150";
}
else {
if(month == null) {
alert('Please fill out the month field');
}
else {
testAge();
}
}
}
function testAge() {
var age = document.getElementById('age').value;
if(age == null) {
alert('Please fill out the age field');
}
else {
if(age < 5 || age > 90) {
alert('Visiters must be between the ages of 5 and 90');
}
else {
if (age == 10 || age == 90) {
testCoupon();
}
else {
if (age < 18 || age == 18) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
}
}
function testCoupon() {
var coupon = document.getElementById('coupon').value;
if (coupon == "YEET") {
document.getElementById('price').innerHTML = "$0";
}
else {
if (document.getElementById('age').value == 10) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">
<input type="text" id="price" name="price">
<input type="submit" name="submit">
</form>