javascriptjquerytextfielddropdownboxformstack

Need JavaScript equivalent of jQuery changing the value of a dropdown when the value of a text field changes

I am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.

<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value="">&nbsp;</option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>

So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.

I used the following jQuery on jsFiddle, but it is not working on Formstack:

$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val()); 
}
);

Here is one Javascript method I am trying on jsFiddle that does not work:

document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};

I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.

Solution

  • I am however curious. Perhaps you want an autocomplete instead?

    Here are your fixed versions

    Plain JS version

    window.onload=function() {
    document.getElementById('field35497729').onkeyup = function() {
    document.getElementById('field35497839').value = this.value;
  }
}
    <input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value="">&nbsp;</option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>

    jQuery version

    $(function() {
  $('#field35497729').on("keyup",function() {
    $("#field35497839").val($(this).val()); // or (this.value)
  })
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
    <select id="field35497839" name="field35497839" size="1" class="fsField">
    <option value="">&nbsp;</option>
    <option value="CIPSmember">CIPSmember</option>
    <option value="TECHCONNEXmember">TECHCONNEXmember</option>
    <option value="TCBCpreferred">TCBCpreferred</option>
    <option value="TCBCcomp2015">TCBCcomp2015</option>
    </select>