如何通过单击多个EJS数据字段来填充多个表单字段

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>
 <% } %>

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

暴躁的天使波旁黑啤酒

MEOWSA！

Vă-da

大量IPA

炸弹（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 addtText = function(beer, brewery) {
        document.getElementById('beerName').value = beerName;
        document.getElementById('breweryName').value = breweryName;
    }
</script>