想让 HTML 表单提交什么都不做答案

【问题标题】：Want HTML form submit to do nothing想让 HTML 表单提交什么都不做
【发布时间】：2011-03-24 00:48:24
【问题描述】：

我希望 HTML 表单在提交后不执行任何操作。

action=""

不好，因为它会导致页面重新加载。

基本上，我希望在按下按钮或有人在键入数据后按 Enter 时调用 Ajax 函数。是的，我可以删除表单标签并添加只是从按钮的 onclick 事件中调用该函数，但我还想要“点击输入”功能而不会得到所有 hackish。

【问题讨论】：

“我还想要“敲击回车”功能，而不会弄得一团糟。”我认为在您决定使用带有 action="" 的表单后，该船已启航。为什么不为 onclick 事件和 keypress 事件连接处理程序？

标签： javascript html ajax forms submit

【解决方案1】：

通过在您从提交按钮调用的 JavaScript 代码中使用 return false;，您可以阻止表单提交。

基本上，您需要以下 HTML：

<form onsubmit="myFunction(); return false;">
    <input type="submit" value="Submit">
</form>

然后是支持的JavaScript代码：

<script language="javascript"><!--
    function myFunction() {
        // Do stuff
    }
//--></script>

如果你愿意，你也可以在一定条件下允许脚本提交表单：

<form onSubmit="return myFunction();">
    <input type="submit" value="Submit">
</form>

搭配：

<script language="JavaScript"><!--
    function myFunction() {
        // Do stuff
        if (condition)
            return true;

        return false;
    }
//--></script>

【讨论】：

缺少function关键字：function myFunction() { }
需要 myFunction() 吗？换句话说，不能简单地做
吗？

【解决方案2】：

<form id="my_form" onsubmit="return false;">

够了……

【讨论】：

我认为它不会在专门使用 JS 提交表单的 POST FIELD 上工作；你能给我们一个 jsfiddle 演示吗？

【解决方案3】：

它也有效：

<form id='my_form' action="javascript:myFunction(); return false;">

【讨论】：

虽然这并没有什么作用，但它在控制台上显示Uncaught SyntaxError: Illegal return statement。

【解决方案4】：

怎么样

<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
 ......
</form>

【讨论】：

【解决方案5】：

您可以使用以下 HTML

<form onSubmit="myFunction(); return false;">
  <input type="submit" value="Submit">
</form>

【讨论】：

【解决方案6】：

<form onsubmit="return false;">

【讨论】：

您应该添加一些说明您的解决方案的作用。

【解决方案7】：

作为按钮的 onclick 事件的一部分，返回 false，这将阻止表单提交。

即：

function doFormStuff() {
    // Ajax function body here
    return false;
}

只需在点击提交按钮时调用该函数。有很多不同的方法。

【讨论】：

【解决方案8】：

使用jQuery。也许在表单中的元素周围放置一个 div。然后使用 preventDefault() 并进行 Ajax 调用。

【讨论】：

【解决方案9】：

用途：

<form action='javascript:functionWithAjax("search");'>
  <input class="keyword" id="keyword" name="keyword" placeholder="input your keywords" type="search">
  <i class="iconfont icon-icon" onclick="functionWithAjax("search");"></i>
</form>

<script type="text/javascript">
  function functionWithAjax(type) {
    // Ajax action

    return false;
  }
</script>

【讨论】：

你真的应该稍微解释一下代码。它将把一个好的答案变成一个很好的答案。