Question

我想为用户提供3张图片，每张图片都有一个相关的值：

1. left,middle,right
2. middle,left,right
3. left,right,middle

然后，我想将该值写入表单中的文本字段，以便在用户单击“提交”时保存该值。

我已经有了一个工作表单，用户可以在其中键入值1,2 or 3，但希望隐藏文本字段，而用户则选择图像而更新文本字段。

Answer 1

将@id属性设置为隐藏的输入，然后在您的图片中，您可以使用javascript代码，例如

<img src="1.jpg" onclick="document.getElementById('inputID').value='your value'">
<input type="hidden" id="inputID" name="somename">

Answer 2

如果你正在使用jQuery：

<img class="selector123" src="..." rel="1"/>

中的

$(".selector123").click(function(){
  $("#value123input").val($(this).attr('rel'));
});

这是一个例子：）

Answer 3

将onclick处理程序附加到图像，将文本字段的value属性设置为您想要的任何内容。

jQuery中有以下内容：

<img class="clickable" src="something.jpg" alt="left,middle,right"/>
<img class="clickable" src="something.jpg" alt="middle,left,right"/>
<img class="clickable" src="something.jpg" alt="left,right,middle"/>
<input type="hidden" id="clicked-image" name="something"/>

<script>
$(document).ready(function() {
  $('.clickable').bind('click', function () {
    $('#clicked-image').val($(this).attr('alt'));
  });
});
</script>

Answer 4

jQuery使这个任务变得微不足道。您可以将click事件绑定到图像。

摘录：

    <img src="/images/lmr.png" class="direction" name="left,middle,right" />
    <img src="/images/mlr.png" class="direction" name="middle,left,right" />
    <img src="/images/lrm.png" class="direction" name="left,right,middle" />


  <input type="text" value="Click an image" />

<script>
    $('.direction').click(function () {
      var text = $(this).attr('name');
      $("input").val(text);
    });
</script>

在本地测试，输入类型字段获取其值集。现在你可以隐藏它，它将被发布。 (<input type="hidden" etc.)

单击时更改字段字段值

4 个答案: