表单内的图像按钮，不想提交答案

【问题标题】：Image button inside of form, don't want to submit表单内的图像按钮，不想提交
【发布时间】：2011-03-04 23:02:02
【问题描述】：

我有一个表单，里面有一个图像按钮，这个图像按钮正在提交表单。如何覆盖此功能？

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();"/></form>

【问题讨论】：

标签： html forms button submit

【解决方案1】：

为什么不只有图像？ return false 也会停止表单提交操作。

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="autofill();return false;"/></form>

【讨论】：

【解决方案2】：

在你的 autofill() 函数之后返回 false。

onclick="autofill();return false;"

【讨论】：

【解决方案3】：

为什么要使用输入元素？如果您不想引起任何提交或重置行为，我认为仅使用带有 onclick 事件的图像会更合适

<image src="/images/arrow.png" onclick="javascript:autofill();" width="xxx" height="xxx" alt="Autofill" />

【讨论】：

根据提问的方式，这是正确的答案

【解决方案4】：

点击表单内的按钮，默认提交表单。要更改它，您必须使用 type="button" 定义一个按钮。然后，您可以在其中添加 img 元素。这是我发现的最好的方法。

<form>
    <button type="button" id="imageButton" onclick="javascript:autofill();">
        <img src="images/arrow.png">
    </button>
</form>

【讨论】：

嗨 Uri，欢迎来到堆栈溢出。正常用法是解释为什么您的代码提供了 OP 问题所要求的解决方案。
已添加说明。感谢您的启发。

【解决方案5】：

尝试使用 event.preventDefault 在按钮点击时中止提交事件

例如：

$("#idButton").click(function(event) {
    if(!valid)
    {
        //stopEvent
        event.preventDefault();

    } else {
        //submit your form
        $("#form").submit();
    }
});

【讨论】：

【解决方案6】：

您想在单击提交按钮/图像后禁用您的按钮吗？

如果您使用的是php，则可以使用下面的代码或添加disabled="disabled" 来禁用该按钮，只要您将其保留在输入表单中即可。

 <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?>

如何添加我的代码

如果您将代码行与图像类型一起使用：

试试：

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> /></form>

如果您想使用不带 javascript 的图像，请也向我 (jagb) 阅读 this answer，也可以在那里找到所需的 css。

【讨论】：

【解决方案7】：

向按钮标签添加属性 type="button" 解决了我的问题。

【讨论】：