I have a form in HTML that I am trying to handle with JQuery 2.1.4 by using event.preventDefault() in the .on('submit', function(event) {}) method but it just reloads even though I have event.preventDefault() in there. Here is my HTML, CSS, and JS code:
var gradeDiv = document.getElementById("grade");
var citDiv = document.getElementById("cit");
var debug = document.getElementById("debug");
var cats = [0, 0, 0, 0];
var catNames = ["nothing", "nothing", "nothing", "nothing"]
var catsGrades = [0, 0, 0, 0];
var hwttl = 0;
var hwcom = 0;
var hwinc = 0;
var cit = 0;
var citg = ["U", "N", "S"];
function calculateCatGrade(catGrades) {
var grade = catGrades;
return Math.round(grade);
}
function calculateLetterGrade(grade) {
var g = "";
if (grade > 97) {
g = "A+";
} else if (grade > 92) {
g = "A";
} else if (grade > 89) {
g = "A-";
} else if (grade > 87) {
g = "B+";
} else if (grade > 82) {
g = "B";
} else if (grade > 79) {
g = "B-"
} else if (grade > 77) {
g = "C+";
} else if (grade > 72) {
g = "C";
} else if (grade > 69) {
g = "C-"
} else if (grade > 67) {
g = "D+";
} else if (grade > 62) {
g = "D";
} else if (grade > 59) {
g = "D-"
} else if (grade > 55) {
g = "F+";
} else if (grade > 5) {
g = "F";
} else if (grade > 0) {
g = "F-";
} else if (grade <= 0) {
return "NG";
}
return g + ": " + grade;
}
function calculateTtlGrade(catPer, grades) {
var amount = catPer.length;
var gradet = 0;
for (var i = 0; i < amount; i++) {
c = calculateCatGrade(grades[i]) * catPer[i];
gradet += c;
}
gradet /= 100;
return calculateLetterGrade(Math.round(gradet));
}
function calculateHw(hwt, hwc, hwi) {
hw = 0;
hw += parseInt(hwc);
hw += parseInt(hwi) / 2;
if (hwt - hw >= 8) {
return 0;
} else if (hwt - hw >= 5) {
return 1;
} else {
return 2;
}
}
function refreshGrades() {
gradeDiv.textContent = "| "
for (var i = 0; i < catsGrades.length; i++) {
if (cats[i] > 0 || catsGrades[i] > 0 || catNames[i] != "nothing") {
gradeDiv.innerHTML += catNames[i] + ": " + calculateLetterGrade(calculateCatGrade(catsGrades[i])) + " | "
}
}
gradeDiv.innerHTML += "<br />"
gradeDiv.innerHTML += "Total: " + calculateTtlGrade(cats, catsGrades);
i = calculateHw(hwttl, hwcom, hwinc);
if (i > cit) {
citDiv.textContent = citg[i];
} else {
citDiv.textContent = citg[cit];
}
$("form").on("submit", function(event) {
event.preventDefault();
var per1 = $("#per1").val();
var nm1 = $("#nm1").val();
var gd1 = $("#gd1").val();
var per2 = $("#per2").val();
var nm2 = $("#nm2").val();
var gd2 = $("#gd2").val();
var per3 = $("#per3").val();
var nm3 = $("#nm3").val();
var gd3 = $("#gd3").val();
var per4 = $("#per4").val();
var nm4 = $("#nm4").val();
var gd4 = $("#gd4").val();
/*
var htotal = $("#hwttl").val();
var hcompl = $("#hwcom").val();
var hincom = $("#hwinc").val();*/
cats[0] = parseInt(per1);
catNames[0] = nm1;
catsGrades[0] = gd1;
cats[1] = per2;
catNames[1] = nm2;
catsGrades[1] = gd2;
cats[2] = per3;
catNames[2] = nm3;
catsGrades[2] = gd3
cats[3] = per4;
catNames[3] = nm4;
catsGrades[3] = gd4;
/*
hwttl = htotal;
hwcom = hcompl;
hwinc = hincom;*/
refreshGrades();
});
refreshGrades();body {
background: black;
color: white;
}
#grade {
color: red;
}
#cit {
color: lightgreen;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grades</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form name="form">
<input type="text" placeholder="category 1" id="nm1" value="nothing" />
<input type="number" placeholder="percent" id="per1" value="0" />
<input type="number" placeholder="grades" id="gd1" value="0" />
<br />
<input type="text" placeholder="category 2" id="nm2" value="nothing" />
<input type="number" placeholder="percent" id="per2" value="0" />
<input type="number" placeholder="grades" id="gd2" value="0" />
<br />
<input type="text" placeholder="category 3" id="nm3" value="nothing" />
<input type="number" placeholder="percent" id="per3" value="0" />
<input type="number" placeholder="grades" id="gd3" value="0" />
<br />
<input type="text" placeholder="category 4" id="nm4" value="nothing" />
<input type="number" placeholder="percent" id="per4" value="0" />
<input type="number" placeholder="grades" id="gd4" value="0" />
<br />
<br /> Homework:
<input type="number" id="hwttl" placeholder="assignments" />
<input type="number" id="hwcom" placeholder="completed" />
<input type="number" id="hwinc" placeholder="late/incomplete" />
<br />
<br />
<input type="submit" value="Submit" />
</form>
<div id="grade"> </div>
<div id="cit">S</div>
<div id="debug"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>Any help would be greatly appreciated.
You are not closing your function refreshGrades man. I just closed your function...
Check your browser's log
After closing the function refreshGrades before the form's event the code stopped failing, and the form's event is launched properly.
Closed function:
Checking the console:
Now, I don't know if that is your expected behaviour but now at least the JS code is not failing.