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

Question

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.

Answer 1

• misspelled ID in getElementById
• missing end bracket on the jQuery version
• simplified to use this and $(this)

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>