Question

根据Prevent form redirect OR refresh on submit?的建议，我的表格是

<form id="editingForm">
  Line height (between 10 and 60): 
  <input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
  <input type="submit" id="submitLineChange" value="Submit">
</form>

在名为test.html的文件中。 javascript是

$('#editingForm').submit(function(){
  alert("abc");
  return false;
});

目的是调用该函数，然后javascript可以对页面执行某些操作，但页面不会重新加载或重定向到其他位置。但是，我得到的是说我将LineHeightEntry设置为40并点击提交。然后它重定向到test.html？LineHeightEntry = 40。为什么这样做？

编辑 - 文件位于http://probuling.net/sandbox/test.html

Answer 1

这是一个有效的例子：

<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
    <form id="editingForm" action="toto">
      Line height (between 10 and 60): 
      <input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
  <input type="submit" id="submitLineChange" value="Submit">
</form>
<script>
$('#editingForm').submit(function(event)
{
  alert("abc");
event.preventDefault(); // if you want to disable the action
  return false;

});
</script>
</html>

Answer 2

向表单添加操作属性，或者您只是在提交时刷新页面。

<form id="editingForm" action="/another/url">

我建议在尝试使用Javascript之前学习如何使用普通表单提交。任何带有name属性的输入都将附加到URL，因为您没有操作，默认方法设置为GET。

Answer 3

删除行返回false;

这可以防止默认事件。阅读更多细节： http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 4

尝试不使用jQuery。另外，请尝试使用event.preventDefault

document.querySelector('#editingForm').onsubmit = function(event) {
  alert('abc');
  event.preventDefault();
  return false;
};

javascript表单提交无效

4 个答案: