javascript表单提交不起作用答案

【问题标题】：javascript form submit not workingjavascript表单提交不起作用
【发布时间】：2014-03-21 15:10:29
【问题描述】：

根据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

【问题讨论】：

您是否以编程方式在您的form 中设置action 属性...我没看到
表单也需要设置方法属性...
它不重定向：jsfiddle.net/3RAPj
你确实加载了 jQuery，对吧？
我愿意，甚至用非 jquery 替换 jquery 的建议仍然重定向。

标签： javascript jquery forms

【解决方案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>

【讨论】：

@user2963178 我认为问题在于您在加载 DOM 之前调用了该 js。因此，您试图将事件附加到尚不存在的元素。
这个例子有效，但是当我将 event.preventDefault() 添加到 probuling.net/sandbox/test.html 主页上的脚本中时，它仍然重定向......并且 jquery 被包括在内，所以我仍然是像以前一样迷茫。在 ipage 停止用空白文件替换我的文件之前，实际上花了大约 5 分钟的 ftping 并没有帮助，哈哈……
当它重定向时，它会重定向到旧版本的页面，但名称相同......它没有 jquery，有时页面上有不同的文本，并且有一个旧的 css 文件不再包括在内。
Patrick Q 是对的，您需要将 Javascript 绑定代码放在您的 html 表单之后。我刚做了，效果很好
啊我没明白他的意思。是的，现在它适用于该更改。

【解决方案2】：

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

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

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

【讨论】：

这不是问题。默认情况下，页面会自行回发。
我知道如何使用普通表单提交。我想要的是它不刷新页面或加载任何其他页面。基本上，输入字段允许用户修改页面上某些元素的 CSS，而 textarea 也允许用户修改这些元素的内容。因此，当提交表单时，我希望它只运行 javascript 函数，这些函数可以完成所有工作。从某种意义上说，我将它与单击按钮绑定在一起，因此它可以很好地工作。但是我不能让它与表单一起工作，所以这就是我感兴趣的。
提交函数回调工作正常。查看小提琴jsfiddle.net/ankur1990/935V6

【解决方案3】：

删除线返回false；

这会阻止默认事件。阅读更多详情： http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

【讨论】：

【解决方案4】：

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

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

【讨论】：

这也不起作用。我将文件的 url 放在 OP 中。 probuling.net/sandbox/test.html
我刚刚尝试了您的测试页面，它对我来说可以正常工作（在 Chrome 上）。你使用的是什么浏览器？您是否禁用了 javascript？