javascript - Jquery 运行代码并在提交表单后将结果显示到控制台

Question

我试图在提交表单后运行代码，但是当我按下按钮时它会将我导航到另一个页面(index.html？)并且控制台中没有结果，我做错了什么？

$(document).ready(function() {
  $("#input1").submit(function() {
    var sum = 0;
    var lim = $("#input1").val();
    for (var i = 1; i < lim; i++) {
      if ((i % 3) == 0 || (i % 5) == 0) {
        sum += i;
      }
    }
    console.log(sum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="input1">
  <input type="text" value="1000" class="inputText">
  <input type="submit" value="Calculate">
</form>

Answer 1

您需要阻止表单提交的默认操作，为此使用 event.preventDefault() 而且您也没有为元素指定 id。

$(document).ready(function() {
  $("#input1").submit(function(e) {
    e.preventDefault();
    var sum = 0;
    var lim = $("#input2").val();
    for (var i = 1; i < lim; i++) {
      if ((i % 3) == 0 || (i % 5) == 0) {
        sum += i;
      }
    }
    console.log(sum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="input1">
  <input type="text" id="input2" value="1000" class="inputText">
  <!-- set id here ---^---------------------------------------->
  <input type="submit" value="Calculate">
</form>