Html 表单内的图像按钮，不想提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5200215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image button inside of form, don't want to submit
提问by TomBomb
I have a form with an image button inside of it, and this image button is submitting the form. How do I override this functionality?
我有一个表单，里面有一个图像按钮，这个图像按钮正在提交表单。如何覆盖此功能？
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();"/></form>
回答by amit_g
Why not just have image? return false would also stop the form submit action.
为什么不只有图像？return false 也会停止表单提交操作。
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="autofill();return false;"/></form>
回答by Fatih Acet
simply return false after your autofill() function.
只需在 autofill() 函数后返回 false。
onclick="autofill();return false;"
回答by John Parker
Why use an input element at all? I'd have thought just using an image with an onclick event would be more appropriate if you don't want to cause any submit or reset behaviour
为什么要使用输入元素？如果您不想引起任何提交或重置行为，我认为只使用带有 onclick 事件的图像会更合适
<image src="/images/arrow.png" onclick="javascript:autofill();" width="xxx" height="xxx" alt="Autofill" />
回答by Uri Ziv
Clicking on button inside a form, submit the form by default. To change it, you have to define a button with type="button". Then, you can add img element inside it. This is the best way I found to do it.
点击表单内的按钮，默认提交表单。要更改它，您必须定义一个 type="button" 的按钮。然后，您可以在其中添加 img 元素。这是我找到的最好的方法。
<form>
<button type="button" id="imageButton" onclick="javascript:autofill();">
<img src="images/arrow.png">
</button>
</form>
回答by manish shokeen
Adding attribute type="button" to button tag resolved my issue.
向按钮标签添加属性 type="button" 解决了我的问题。
回答by claudia
Try to use event.preventDefaultto abort submit event on button click
尝试使用event.preventDefault在按钮单击时中止提交事件
for example:
例如：
$("#idButton").click(function(event) {
if(!valid)
{
//stopEvent
event.preventDefault();
} else {
//submit your form
$("#form").submit();
}
});
回答by jagb
Do you want to disable your button after click the submit button/image?
您想在单击提交按钮/图像后禁用您的按钮吗？
if you're using phpyou can use the code below or add disabled="disabled"to disable the button as long as you keep it in your input form..
如果您正在使用php，则可以使用下面的代码或添加disabled="disabled"以禁用该按钮，只要您将其保留在输入表单中即可..
<?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?>
how to add my code
如何添加我的代码
if you use your line of code with an image type:
如果您将代码行与图像类型一起使用：
try:
尝试：
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> /></form>
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> /></form>
Please, read this answerfrom me (jagb) too if you'd like to use an image without javascript, the needed
csscan be found on there as well.
如果您想使用没有 javascript 的图像，也请阅读我 (jagb) 的这个答案，
css也可以在那里找到所需的图像。
