提交表单后，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指定为element。

 $(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> 

Answer 2

我不相信所选答案是完全正确的。

OP的代码唯一明显的问题是使用了错误的元素ID。 该计算基于“＃input2”的值，但是OP的代码错误地使用了“＃input1”。 显然，这将破坏计算输出到控制台。

插入e.preventDefault（）; 在代码中似乎不是解决方案的一部分。 jQuery将在提交表单之前完成计算。 通过添加较长的计算对它进行了测试，效果还不错。 而且由于没有使用异步调用（导致竞争条件），所以让表单正常提交似乎很安全。

*（注意： e.preventDefault（）;或返回false；都将阻止表单提交。）*

尚未解决的问题是，某些调试器会清除导航中的控制台。 例如，控制台持久性是可以在Chrome中打开的选项。 并且需要启用此功能以在提交表单后查看控制台输出。

Answer 3

当您拥有表格时，必须有一个“ GET”或“ POST”方法。 出现您的问题时，我的总和为0。

console.log(sum) = 0

https://jsfiddle.net/8kzf0wdf/