如何从多个 EJS 数据字段的 onClick 填充多个表单字段

Question

如果在其他地方回答了这个问题，我深表歉意，请指出那个方向。

从一个动态填充的列表中，我知道了如何单击列表中的一项并将该文本转到我的表单输入。

我的 ejs 代码...

 <% for(var i=0; i<BeerList.length; i++) {%>
    <div>
      <a onclick="document.getElementById('beerName').value='<%= BeerList[i].beer.beer_name %>'" >
        <span><%= BeerList[i].beer.beer_name %></span>
      </a>
    </div>
 <% } %>

...将显示啤酒名称列表...

Raspy Angel Bourbon Stout

喵喵！

Vă-da

宏大的国际音标

B 炸弹（2019 年）

当我点击啤酒名称时，该名称将填充我的表单输入字段。

表单代码...

<form>
<input type="text" id="beerName" />
</form>

这很好用，但我不知道如何将单独的数据添加到单独的表单输入中。 例如，如果我想在啤酒名称之外包含啤酒厂名称，我会尝试这样的...

 <% for(var i=0; i<BeerList.length; i++) {%>
    <div>
      <a onclick="document.getElementById('beerName').value='<%= BeerList[i].beer.beer_name %>'" >
        <span><%= BeerList[i].beer.beer_name %></span>
        <span><%= BeerList[i].brewery.brewery_name %></span>
      </a>
    </div>
 <% } %>


<form>
   <input type="text" id="beerName" />
   <input type="text" id="breweryName" />
</form>

这显然不起作用，因为我的 onClick 甚至无法查找 id=breweryName。如果我为 form 提供 form id="beerANDbrewery" 之类的 id，我不知道如何将每个项目放入适当的输入字段。

非常感谢您提供的任何帮助！

Answer 1

您可以创建一个处理这两种情况的函数。该函数应将您想要的值作为参数。

<% for(var i=0; i<BeerList.length; i++) {%>
    <div>
        <a onclick="addText('<%= BeerList[i].beer.beer_name %>', '<%= BeerList[i].brewery.brewery_name %>') " >
        <span><%= BeerList[i].beer.beer_name %></span>
        <span><%= BeerList[i].brewery.brewery_name %></span>
       </a>
    </div>
<% } %>

<form>
   <input type="text" id="beerName" />
   <input type="text" id="breweryName" />
</form>


<script type="text/javascript">
    var addText = function(beerName, breweryName) {
        document.getElementById('beerName').value = beerName;
        document.getElementById('breweryName').value = breweryName;
    }
</script>