表单，不执行任何操作，并且在其中输入不会重新加载页面

94

我正在寻找最简洁的方法来创建没有提交按钮的HTML表单。这本身很容易，但是在完成类似提交的操作（例如，Enter在文本字段中单击）后，我还需要阻止表单重新加载自身。

javascript html forms

— 马特·罗伯茨
source

您是否希望它从不提交？

— 09年

如果只有一个带有单个<input>的<form>，这是一个文本字段，那么在按Enter时不应该提交，应该吗？

— Zack The Human

我希望它在其他条件下提交（实际上是按某个按钮）。问题是我无法获得“在文本字段中输入”的发布/获取相同URL的行为。因此，我精心创建的表单（您需要在X，Y和Z处进行提交才能提交）可能会被用户按Enter键错误地提交。

— 马特·罗伯茨

44

将onsubmit处理函数添加到表单中（通过纯js或jquery $（）。submit（fn）），并返回false，除非满足您的特定条件。

除非您永远不希望表单提交-在这种情况下，为什么不只在form元素上忽略'action'属性？

— K Prime
source

151

action根据标准，没有属性的表单不是表单-实际上会导致某些浏览器中的页面重新加载。.我发现这种方法action="javascript:void(0);"很好用。

— Dutchie432'2011-10-17

荷兰人的答案非常完美。Firefox只是刷新页面。

— IAmGroot 2012年

1

@ Dutchie432应该将此作为答案而不是评论。然后它将到达属于它的顶部。或者，KPrime可以调整他的答案，因为省略该动作对我不起作用...

— Sage

211

您需要将其包含action="javascript:void(0);"在表单中，以防止页面重新加载并保持HTML标准。

— 荷兰人432
source

4

仅仅花了2天的时间来尝试抑制按下Enter键时的“提交按钮”默认操作，因为尽管该操作发生了，但是页面最终还是被重新加载（Firefox）。在表单上添加javascript void作为操作来修复它。感谢那。

— Tony Payne

感谢您的附加答案。这仍然有效-但这仍然是2016年的“最先进”解决方案吗？

— low_rents

1

@low_rents我一直都在使用它，并且个人还没有找到更好的解决方案。

— Dutchie432

1

感谢您提供精确而有效的解决方案，以解决该问题，同时按Enter键:)最佳解决方案。

— 伊姆兰·拉菲克·拉瑟

9

只需将此事件添加到您的文本字段即可。这样可以防止按Enter键进行提交，您可以根据需要随意添加提交按钮或调用form.submit（）：

onKeyPress="if (event.which == 13) return false;"

例如：

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

— GenericMeatUnit
source

1

谢谢你恐怕您回答的清晰会使我清楚早先回答的正确性，因此您不会得到公认的答案，但是您确实会得到我的感谢和支持！

— 马特·罗伯茨

2

谢谢。乐意效劳。无论如何，我从来都不是众人瞩目的焦点。;）

— GenericMeatUnit 2010年

5

当您按某种形式按Enter键时，要提交表单的自然行为，要停止这种不自然的行为，您必须使用jquery阻止它提交（默认行为）：

$("#yourFormId").on("submit",function(event){event.preventDefault()})

— jsDevia
source

4

一个想法：

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

和

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

— 汤姆·贵族
source

1

解决的两种方法：

表单的操作值为“ javascript：void（0）;”。
为表单添加按键事件监听器以防止提交。

— 法案
source

听按键事件（例如Enter键）可能会给您带来textareas的麻烦，并且可能会选择自动补全或下拉菜单，而移动设备可能是另一个麻烦源。

— luckydonald

0

第一个回应是最好的解决方案：

将onsubmit处理函数添加到表单中（通过纯js或jquery $（）。submit（fn）），并返回false，除非满足您的特定条件。

使用jquery更具体：

$('#your-form-id').submit(function(){return false;});

除非您永远不希望表单提交-在这种情况下，为什么不只在form元素上忽略'action'属性？

编写Chrome扩展程序就是一个示例，其中您可能有一个供用户输入的表单，但您不希望它提交。如果您使用action =“ javascript：void（0）;”，该代码可能会起作用，但最终会遇到此问题，您会收到有关运行内联Javascript的错误。

如果您完全不进行操作，那么在编写Chrome扩展程序时，表单在某些情况下也不会重新加载。或者，如果您的网页上带有某种嵌入式计算器，那么用户将在其中提供一些输入，然后单击“计算”或类似的内容。

— 骷髅
source