使用按钮图像填充表单文本字段答案

【问题标题】：Populate form text field with button image使用按钮图像填充表单文本字段
【发布时间】：2014-04-22 13:41:53
【问题描述】：

我在这里看到了这个问题/答案populate text box on click of radio button

这基本上实现了我想要的，但不是单选按钮，我想使用我自己的图像用作按钮，所以你点击图像“标签”，然后它会变灰/变成几乎透明，它会填充在表单字段中。

这是一个搜索表单，因此人们可以单击一个显示“餐厅”的按钮，然后它会在表单字段中填写餐厅，如果他们愿意，他们仍然可以在主搜索字段中输入，但这只是为用户提供更多指导。

如果有任何方法我们可以在没有 javascript 的情况下做到这一点，那就太棒了，但我可能看不到这种情况发生。

希望它相对简单。

提前致谢

【问题讨论】：

那么你现在有什么代码？什么不工作？

标签： javascript html image forms button

【解决方案1】：

点击Fiddle！

享受:)

HTML：

 <fieldset data-role="controlgroup" data-type="horizontal">
    <div>
    <img class="stam" alt="Resturant" src="img1.jpg"/>

    <img class="stam" alt="Gym" src="img2.jpg"/>        

    </div>
</fieldset>       
<br>
<form>
    <input type="text">
</form>

Js：

$('.stam').on('click', function() {
    $('input[type="text"]').val($(this).attr("alt"));

});

【讨论】：

downvote for using jQuery without say so ;) Question states 'if possible no JS' so added jQuery kind of add a lot of bloat
抱歉这么久才回复！对我来说它看起来真的很好，小提琴似乎也很完美！我会测试一下，让你知道谢谢！
现在有人可以准确地向我解释这里发生了什么吗？比如字段集的用途和数据类型等。再次感谢:)
成功了！遇到了一些麻烦，因为我公司决定使用的 CMS 令人震惊，但可以解决它，而且它很漂亮，谢谢。另一个问题，如何使这个字段对单个字段具有唯一性，我将拥有 3 个字段，地点类型（这个）在哪里（如在城市中）和英里（从城市的半径），我只想填充第一个搜索字段。
为了使其对特定字段唯一，我使用了#mycustomid 而不是 input[type="text"]

【解决方案2】：

DEMO

进行一些更改，您就可以开始了！

HTML

<fieldset data-role="controlgroup" data-type="horizontal">
  <div id="img_filter">
    <img data-filter="Restaurant" src="http://placehold.it/120x30/&text=Restaurant"/>
    <img data-filter="Park" src="http://placehold.it/120x30/&text=Park"/>
    <img data-filter="Bank" src="http://placehold.it/120x30/&text=Bank"/>
  </div>
</fieldset>       
<form>
  <input id="query" type="text" />
</form>

JS

$('#img_filter img').on('click', function() {   
 $('#query').val($(this).data('filter'));
});

【讨论】：