jQuery Populate input fields depending on Select input

Robert Granlund
Robert Granlund used Ask the Experts™
on
I have a Form with a select option dropdown.  The form is pretty long.  Depending upon the Option Selected I would like to populate 3-4 other input boxes with it's value, when the select changes.  How do I do this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,
in general it should go like this:
$(document).ready(function () {
  $("#yourselectid").change(function() {
    $("#inputid1").val($(this).val());
    ...
});
});

Open in new window

HTH
Rainer
Uros Gaberdirector

Commented:
Example for doing this:
<select id="selectid">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
  $('#selectid').change( function () {
    var selected = $(this).find('option:selected').val();
   if (selected == "val1") { alert ('selected Value 1'); }
   if (selected == "val2") { alert ('selected Value 2'); }
  });
});
</script>

Open in new window

Uros Gaberdirector

Commented:
Or to be more exact for your question:
<input type="text" id="textfield">
<select id="selectid">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
  $('#selectid').change( function () {
    var selected = $(this).find('option:selected').val();
   if (selected == "val1") { $('#textfield').val('selected Value 1'); }
   if (selected == "val2") {$('#textfield').val('selected Value 2'); }
  });
});
</script>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Here is a generic solution that will work for any number of selects and linked fields
HTML
    <form>
      <div class="form-group">
        <select name="test" class="prepop form-control" data-role="prepop1">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
        </select>
      </div>
      <div class="form-group">
        <input type="text" name="input1" role="prepop1" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input2" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input3" role="prepop1" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input4" class="form-control"/>
      </div>
      <div class="form-group">
        <select name="test2" class="prepop form-control" data-role="prepop2">
          <option value="10">Ten</option>
          <option value="11">Eleven</option>
          <option value="12">Twelve</option>
          <option value="13">Thirteen</option>
          <option value="14">Fourteen</option>
        </select>
      </div>
      <div class="form-group">
        <input type="text" name="input5" role="prepop2" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input6" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input7" class="form-control"/>
      </div>
      <div class="form-group">
        <input type="text" name="input8"  role="prepop2" class="form-control"/>
      </div>
    </form>

Open in new window

jQuery
<script>
$(function() {
  $('select.prepop').change(function() {
    $('[role="' + $(this).data('role') + '"]').val($(this).val());
  });
});
</script>

Open in new window

Working sample here

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial