Question

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

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

这段代码错了吗？

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

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

表单工作正常，这不是问题，我只需要帮助输入部分不提交，因为我知道它有效。

由于

Answer 1

输入类型=“图像”仅将该图像定义为提交按钮，而不是作为可以将值传递给服务器的输入。

Answer 2

使用type =“image”是有问题的，因为传递值的能力因某些愚蠢的理由而被禁用。无论如何＆amp;虽然它不是可定制的＆amp;因此，只要它们是type =“button”的一部分，你仍然可以使用你的图像。

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

希望这有帮助！ ^ _ ^

Answer 3

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

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

Answer 4

我发现图片按钮会返回响应，但您不应该使用值选项。我看到的内容是name="MYNAME"的两个版本.X和.Y结尾。

例如：

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

这是在<form>到</form>之内。如果您点击该图片，则返回的内容为STOP.X和STOP.Y，并带有数字值。存在任何一个表示单击了STOP图像按钮。您不需要任何特殊代码。只需将其视为另一种＆＃34;提交＆＃34;返回一对增强NAME的按钮。

我在Safari，Firefox和Chrome上试过这个。 Safari没有显示图像，但应该找到它的位置，我的光标变成了手指图标，我可以点击它。

Answer 5

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

解决方法是：

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

Answer 6

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

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

这样，您的表单就会提交正确的ID。

Answer 7

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

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

然后在页面上：

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

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

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

Answer 8

解决方案：

<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;

}

此致 JP

Answer 9

类型=“图像”的输入在用于提交表单时不会发送其名称/值对。对我来说，这听起来像是个错误，但这就是事实。

要解决此问题，您可以将input替换为类型为{submit“的button，并在其中放置img元素。

不幸的是，这会使您的图像显示在难看的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>

Answer 10

如果我在你的位置，我会这样做。我会有一个隐藏的字段，并根据输入图像字段，我将更改隐藏的字段值（jQuery），然后最终提交其值反映的隐藏字段图像领域。

Answer 11

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

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

Answer 12

添加此

    name="myvalue"

到你的标签。

Answer 13

提交您可以使用的表格：

<input type="submit">

或

<input type="button"> + Javascript

我从来没有听说过如此疯狂的人试图使用图像或复选框发送表单，如你所愿：））

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

13 个答案: