jqueryformspreventdefaultjquery-on

JQuery 2.1.4 preventDefault on form submit not working

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.

Solution

  • You are not closing your function refreshGrades man. I just closed your function...

    enter image description here

    Check your browser's log

    enter image description here

    After closing the function refreshGrades before the form's event the code stopped failing, and the form's event is launched properly.

    Closed function:

    enter image description here

    Checking the console:

    enter image description here

    Now, I don't know if that is your expected behaviour but now at least the JS code is not failing.