想让 HTML 表单提交啥都不做

Posted 2023-02-22

【中文标题】想让 HTML 表单提交啥都不做

【英文标题】：Want HTML form submit to do nothing想让 HTML 表单提交什么都不做

【发布时间】：2011-03-24 00:48:24

【问题描述】：

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

action=""

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

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

【问题讨论】：

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

【参考方案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>

【讨论】：

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