Binding Input to Value of Button Click Function

Question

I have an HTML user interface that uses Bootstrap, and has a dropmenu as well as some input fields. What I want to be able to do is populate the input field with the value of the drop-menu selection. So far I haven't been able to bind to that value and have it show up in the input value field.

Here is my code:

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

I tried this:

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

And this:

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

... but it did not bind to the input field.

How can I get the value selected when my button is clicked to appear in the input text box?

You were on the right track to set the ID to selection. All you gotta do is change this document.getElementById("selection").innerHTML = val; to this: document.getElementById("selection").value = val;. Example: codepen.io/iskandarreza/pen/xxxWrGx — Iskandar Reza
– Iskandar Reza, Commented Nov 5, 2019 at 19:58
Ah, yes! Thanks, @IskandarRezaRazali. If you want to add this as an answer I'll mark it as correct. Thanks! — Muirik
– Muirik, Commented Nov 5, 2019 at 20:01

Iskandar Reza · Accepted Answer · 2019-11-05 20:03:07Z

Just swap the innerHTML to value and you're good to go.

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>

Collectives™ on Stack Overflow

Binding Input to Value of Button Click Function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related