Как заполнить несколько полей формы из onClick нескольких полей данных E JS - PullRequest
1 голос
/ 20 января 2020

Я прошу прощения, если на этот вопрос ответили в другом месте, пожалуйста, укажите мне в этом направлении.

Из динамически заполненного списка я выяснил, как щелкнуть один элемент в списке и получить этот текст go к моей форме ввода.

Мой код e js ...

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

MEOWSA!

Vă-da

Великодушный IPA

B-Bomb (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 id = "beerANDbrewery" , я не знаю, как go получить каждый элемент в соответствующее поле ввода.

Большое спасибо за любую помощь, которую вы можете оказать!

1 Ответ

1 голос
/ 20 января 2020

Вы можете создать функцию, которая обрабатывает оба случая. Функция должна принимать в качестве параметров нужные значения.

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