Onclick 提交带有图像按钮的表单 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5043589/
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
Onclick Submit form Javascript with image buttons
提问by Belgin Fish
hey, well I have this form
嘿，我有这个表格
<form method="POST" action=''>
<input type="hidden" name="op" value="download1">
<input type="hidden" name="usr_login" value="<TMPL_VAR usr_login>">
<input type="hidden" name="id" value="<TMPL_VAR file_code>">
<input type="hidden" name="fname" value="<TMPL_VAR file_name>">
<input type="hidden" name="referer" value="<TMPL_VAR referer>">
<div class="premium-download"><input name="method_premium" value="<TMPL_VAR lang_premium_download>" type="image" src="images/premium-download.png" alt="<TMPL_VAR lang_premium_download>" border="0" /></div>
<div class="free-download"><input name="method_free" value="<TMPL_VAR lang_free_download>" type="image" src="images/free-download.png" alt="<TMPL_VAR lang_free_download>" /></div>
</form>
How can I submit the form from the image inputs (see the last two fields)? Right now they are set as image type and I understand that those will not submit the form by default. Could anyone help? I was told to do it with javascript :D
如何从图像输入提交表单（请参阅最后两个字段）？现在它们被设置为图像类型，我知道默认情况下它们不会提交表单。有人可以帮忙吗？有人告诉我用 javascript 来做：D
回答by Andy E
I initially misread your question. As already noted, <input type="image">elements dosubmit forms. However, if you're looking for more versatility than image inputs, my answer still applies.
我最初误读了您的问题。如前所述，<input type="image">元素确实会提交表单。但是，如果您正在寻找比图像输入更多的多功能性，我的答案仍然适用。
I was told to do it with javascript
有人告诉我用 javascript 来做
Don't, use <button>elements instead. <button>elements work like <input type="button">, except that they can be styled to have no border, be transparent, and they can contain other HTML. For example:
不要，改用<button>元素。 <button>元素的工作方式与 类似<input type="button">，不同之处在于它们可以设置为没有边框、透明并且可以包含其他 HTML。例如：
<button type="submit" name="method_premium" value="<TMPL_VAR lang_premium_download>">
<img src="images/premium-download.png" alt=alt="<TMPL_VAR lang_premium_download>" />
</button>
Style the button with CSS (border:none; background-color:transparent;) and you're good to go.
使用 CSS ( border:none; background-color:transparent;)设置按钮样式，您就可以开始了。
Buttons created with the
BUTTONelement function just like buttons created with theINPUTelement, but they offer richer rendering possibilities: theBUTTONelement may have content. For example, aBUTTONelement that contains an image functions like and may resemble anINPUTelement whose type is set to "image", but theBUTTONelement type allows content.
使用
BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON元素可能有内容。例如，BUTTON包含图像的元素功能类似于并且可能类似于INPUT类型设置为“图像”的BUTTON元素，但元素类型允许内容。
回答by Pointy
Input elements with "type" set to "image" do indeed act (almost) exactly like "submit" inputs. It's "almost" exactly because you also get the coordinates of the mouse click, and you don'tget the "value" of the input element.
“类型”设置为“图像”的输入元素确实（几乎）与“提交”输入完全一样。它“几乎”正是因为您还获得了鼠标单击的坐标，而您没有获得输入元素的“值”。
If you wanted the clicks on the "image" inputs to submit the values, the simplest thing to do would be to have a couple more hidden inputs.
如果您希望点击“图像”输入来提交值，最简单的做法是添加更多隐藏输入。
回答by Jonathan
I don't know what you are trying to achieve, but you could submit the form using JavaScript. It might be best to use the BUTTON as suggested by @Andy E:
我不知道您想要实现什么，但您可以使用 JavaScript 提交表单。最好按照@Andy E 的建议使用 BUTTON：
<form method="POST" name='myForm'>
...
...
<script lang="javascript">
function SubmitForm()
{
document.forms['myForm'].submit() ;
}
</script>
