Привязка ввода к значению функции нажатия кнопки

Question

У меня есть пользовательский интерфейс HTML, который использует Bootstrap, имеет выпадающее меню и некоторые поля ввода. То, что я хочу сделать, это заполнить поле ввода значением выбора из выпадающего меню. До сих пор я не смог привязать это значение и показать его в поле входного значения.

Вот мой код:

<div id="create-job-pane">
        <div class="container">
          <h2>Create Job</h2>
          <div class="dropdown">
            <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
              Select Job Type to Schedule
              <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li>
                <a href="#"><button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button></a>
              </li>
              <li>
                <a href="#"><button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button></a>
              </li>
              <li>
                <a href="#"><button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button></a>
              </li>
            </ul>
          </div>
        </div>
        <hr />

        <!-- <p id="selection"></p> --> // Works if I populate it here

        <div class="form-group">
          <label>Job name</label>
          <input type="text" class="job-name form-control"> // Bind value here
        </div>
        <div class="form-group">
          <span class="btn btn-default btn-success" data-action="save">Save</span>
          <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
        </div>
      </div>

  // ... other code

  <script>
    function populateJobVal(val) {
      document.getElementById("selection").innerHTML = val;
    }

  </script>

Я попробовал это:

 <input type="text" class="job-name form-control" value="selection">

И это:

 <input type="text" class="job-name form-control" id="selection">

... но оно не привязывалось к полю ввода.

Как получить значение, выбранное при нажатии моей кнопкипоявиться в текстовом поле ввода?

Answer 1

Просто поменяйте innerHTML на value и все готово.

function populateJobVal(val) {
  console.log(val);
  document.getElementById("selection").value = val;
}

<div id="create-job-pane">
        <div class="container">
            <h2>Create Job</h2>
            <div class="dropdown">
                <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Select Job Type to Schedule
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button></a>
                    </li>
                    <li>
                        <a href="#"><button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button></a>
                    </li>
                    <li>
                        <a href="#"><button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button></a>
                    </li>
                </ul>
            </div>
        </div>
        <hr />

        <div class="form-group">
            <label>Job name</label>
            <input type="text" class="job-name form-control" id="selection"> // Bind value here
        </div>
        <div class="form-group">
            <span class="btn btn-default btn-success" data-action="save">Save</span>
            <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
        </div>
    </div>