Question

Hey guys I managed to get a text input and select box to updated based off of the input box using some javascript….but we changed our form variables so I can no longer use the input “name”…I now need to use the id. How can i alter my javascript to use the id t do what Im currently doing?

jsp:

TAMCN:&nbsp;<input type="text" id="tamcn" name="tamcn"  value=""  size="6" maxlength="5" onkeyup="javascript:tamcnSearchUpdated(this.value,'detSearchForm')" onkeypress="javascript:return noenter();" autocomplete="off" />
    <select id="tamcnList"  name="filterCriteria('TAMCN').values" onchange="javascript:this.form.tamcn.value = '';">
    <option value="">&nbsp;</option>
    <c:forEach var="tamcn" items="${tamcns}"><option value="${tamcn.code}">${tamcn.code}</option></c:forEach>
</select>

javascript:

  function tamcnSearchUpdated(tamcn, formName)
    {
        var tamcnUpper = tamcn.toUpperCase();
        document.forms[formName].elements.tamcn.value = tamcnUpper;

        var len = tamcn.length;
        if ( tamcnUpper.indexOf('*') >= 0 )
        {
            document.forms[formName].elements['tamcnList'].options[0].selected = 'selected';
            return;
        }

        for (var i = 0; i < document.forms[formName].elements['tamcnList'].options.length; i++)
        {
            if (document.forms[formName].elements['tamcnList'].options[i].text.substr(0,len) == tamcnUpper)
            {
                document.forms[formName].elements['tamcnList'].options[i].selected = 'selected';
                return;
            }
        }

Answer 1

Use document.getElementById().

So, instead of

document.forms[formName].elements['tamcnList']

write

document.getElementById('tamcnList')

You may want to assign it to a variable instead of repeating it everytime. Keep your code DRY.

See also:

• Mozilla Developer Network – JavaScript tutorial