chrisp54 chrisp54 - 5 months ago 8
jQuery Question

Append a form value to a textbox

I'm trying to take the value selected in a dropdown box and append it to another textbox on my page using JQuery.

take the value from this form

<form id="val">
<select>
<option value="Counseling General CBI Determinations">CBI Determinations</option>
<option value="Counseling General Correspondence">Correspondence</option>
<option value="Counseling General Memorandum">Memorandum</option>
</select>
<button type="button" id="append">apply filter</button>
</form>


Append to this textbox

<input name="txtBox" type="text"/>

Kld Kld
Answer

First thing you need to fix your html, options need to be inside a select then you can do it in the click event handler for the button.

$('#append').click(function() {
  var selectedVal = $('#mySelect').val();
  $('input[name="txtBox"]').val(selectedVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="val">
    <select name="mySelect" id="mySelect">
      <option value="Counseling General CBI Determinations">CBI Determinations</option>
      <option value="Counseling General Correspondence">Correspondence</option>
      <option value="Counseling General Memorandum">Memorandum</option>
    </select>
<button type="button" id="append">apply filter</button>
</form>
Append to this textbox

<input name="txtBox" type="text"/>