Html 输入类型图像提交表单值？

Input Type image submit form value?

提问by Satch3000

I am using this code to try and submit a value via form but it doesn't seem to submit anything...

我正在使用此代码尝试通过表单提交一个值，但它似乎没有提交任何内容...

I would normally use a checkbox or Radio buttons for multiple options but I want to use an image to do this.

我通常会为多个选项使用复选框或单选按钮，但我想使用图像来执行此操作。

Is this code wrong?

这段代码有错吗？

<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />

So I want to pass the value in value="myValue".

所以我想传递 value="myValue" 中的值。

The form works fine so that's not the problem, I just need help with the input part not submitting as I know that works.

表单工作正常，所以这不是问题，我只需要输入部分的帮助，因为我知道它可以工作。

Thanks

谢谢

回答by Francisco Paulo

An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.

输入 type="image" 仅将该图像定义为提交按钮，而不是将值传递给服务器的输入。

回答by BoyBlueSky

Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".

使用 type="image" 是有问题的，因为由于某种愚蠢的缺乏原因，传递值的能力被禁用。无论如何&虽然它不是可定制的&因此不那么漂亮，但您仍然可以使用图像，只要它们是 type="button" 的一部分。

<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>

Hope this helps! ^_^

希望这可以帮助！^_^

回答by jungwook

I was in the same place as you, finally I found a neat answer :

我和你在同一个地方，最后我找到了一个简洁的答案：

<form action="xx/xx" method="POST">
  <input type="hidden" name="what you want" value="what you want">
  <input type="image" src="xx.xx">
</form>

回答by Dick Guertin

I've found that image-buttons DO return a response, but you should NOT use a value-option. What I see returned are two version of the name="MYNAME"with .Xand .Yendings.

我发现图像按钮确实会返回响应，但您不应该使用值选项。我看到返回的是name="MYNAME"with.X和.Yendings 的两个版本。

For example:

例如：

<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">

This is within your <form>to </form>. If you click the image, what's returned are STOP.Xand STOP.Ywith numeric values. The existence of either indicates the STOP image-button was clicked. You don't need any special code. Just treat it as another kind of "submit" button that returns a pair of augmented NAMEs.

这是你的内<form>到</form>。如果你点击图片，什么是退换STOP.X，并STOP.Y与数值。任何一个的存在都表明单击了 STOP 图像按钮。您不需要任何特殊代码。只需将其视为另一种“提交”按钮，它会返回一对增强的 NAME。

I've tried this on Safari, Firefox and Chrome. The image wasn't displayed with Safari, but where it was supposed to be located, my cursor turned into a finger-icon, and I could click it.

我已经在 Safari、Firefox 和 Chrome 上试过了。该图像未在 Safari 中显示，但它应该位于的位置，我的光标变成了一个手指图标，我可以单击它。

回答by Quentin

Some browsers (IIRC it is just some versions of Internet Explorer) only send the co-ordinates of the image map (in name.x and name.y) and ignore the value. This is a bug.

某些浏览器（IIRC，它只是 Internet Explorer 的某些版本）仅发送图像映射的坐标（在 name.x 和 name.y 中）并忽略该值。这是一个错误。

The workarounds are to either:

解决方法是：

• Have only one submit button and use a hidden input to sent the value
• Use regular submit buttons instead of image maps
• Use unique names instead of values and check for the presence of name.x/ name.y

• 只有一个提交按钮并使用隐藏输入发送值
• 使用常规提交按钮而不是图像映射
• 使用唯一名称而不是值并检查name.x/的存在name.y

回答by cogeo

Here is what I was trying to do and how I did it. I think you wanted to do something similar. I had a table with several rows and on each row I had an input with type image. I wanted to pass an id when the user clicked that image button. As you noticed the value in the tag is ignored. Instead I added a hidden input at the top of my table and using javascript I put the correct id there before I post the form.

这是我尝试做的事情以及我是如何做到的。我想你想做类似的事情。我有一个包含几行的表格，在每一行上我都有一个类型为 image 的输入。当用户单击该图像按钮时，我想传递一个 id。正如您所注意到的，标签中的值被忽略了。相反，我在表格顶部添加了一个隐藏输入，并使用 javascript 在发布表单之前将正确的 id 放在那里。

<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">

This way the correct id will be submitted with your form.

这样，正确的 ID 将与您的表单一起提交。

回答by Skeets

Inputs of type="image" don't send their name/value pair when used to submit the form. To me, that sounds like a bug, but that's how it is.

type="image" 的输入在用于提交表单时不会发送它们的名称/值对。对我来说，这听起来像是一个错误，但事实就是如此。

To get around this, you can replace the inputwith a buttonof type="submit", and put a imgelement inside.

为了解决这个问题，可以更换input一个button类型=“提交”，并把一个img元素内。

Unfortunately, that causes your image to be in a ugly HTML "button". However, assuming you aren't using the standard HTML button anywhere, you can just override the stylesheet, and then everything should work as expected:

不幸的是，这会导致您的图像位于丑陋的 HTML“按钮”中。但是，假设您没有在任何地方使用标准 HTML 按钮，您只需覆盖样式表，然后一切都应该按预期工作：

button, input[type="submit"], input[type="reset"] {
 background: none;
 color: inherit;
 border: none;
 padding: 0;
 font: inherit;
 cursor: pointer;
 outline: inherit;
}

<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>

回答by Juan Paez Gallardo

Solution:

解决方案：

<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">  
    <input type="hidden" name="accion" id="accion"/>


<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>


function validaFrmSeguimiento(accion)
{
    document.frmSeguimiento.accion.value=accion;

}

Regards, jp

问候， jp

回答by Neil Philip Whitehead

You could use a radio button/checkbox and set it to hide the button in css and then give it a label with an image.

您可以使用单选按钮/复选框并将其设置为隐藏 css 中的按钮，然后给它一个带有图像的标签。

input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}

Then on the page:

然后在页面上：

<input type="radio" name="emotion" id="mysubmitradio" />
        <label for="mysubmitradio"><img src="images/f.jpg" />
    <span>if you need it</span></label>

And then set it to submit using javascript:

然后将其设置为使用 javascript 提交：

document.forms["myform"].submit();

回答by Bozhidar Hinkov

You could use formaction attribute (for type=submit/image, overriding form's action) and pass the non-sensitive value through URL (GET-request).

您可以使用 formaction 属性（对于 type=submit/image，覆盖表单的操作）并通过 URL（GET 请求）传递非敏感值。

The posted question is not a problem on older browsers (for example on Chrome 49+).

发布的问题在旧浏览器上不是问题（例如在 Chrome 49+ 上）。