JavaScript: switch statement not setting value in text box

Question

I am working on a simple switch statement called from an onChange() function in a select element to set the value of a text field. Currently it is not setting the value. Any insights on improving the code would be appreciated.

function setAgencyPrefix() 
{
var r = document.forms[0].getElementById('agency');
var requestor = r.options[r.selectedIndex].value;
var a = document.forms[0].getElementById('agency_abbrev');
switch (requestor) {
    case 'City of Banks':
        a.value = 'BANKS';
        break;
    case 'City of Beaverton':
        a.value = 'BVT';
        break;
    case 'City of Tigard':
        a.value = 'TIG';
        break;
    case 'City of Tualatin':
        a.value = 'TUAL';
        break;
    default:
        a.value = 'OTHER';
        break;
    }
}

<td>
<select onChange="setAgencyPrefix();" id="agency" name="requesting_entity">
    <option value="City of Beaverton">Beaverton</option>
    <option value="City of Banks">Banks</option>
    <option value="City of Tigard">Tigard</option>
    <option value="City of Tualatin">Tualatin</option>
</select>
</td>

Thanks!

lose forms[0]. in document.forms[0].getElementById

Igor
– Igor

2014-08-28 20:11:16 +00:00
Commented Aug 28, 2014 at 20:11 — Igor
– Igor, Commented Aug 28, 2014 at 20:11

Nightraiser · Accepted Answer · 2014-08-28 20:24:29Z

1

i guess the problem is in var a, its not calling the textbox which it is supposed to call, check it using console in the browzer and type a in the console, if it doesnt return the text field just remove that form[0] and try. All the best.:)

answered Aug 28, 2014 at 20:24

Nightraiser

3091 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raja CSP · Accepted Answer · 2014-08-28 20:29:30Z

I have corrected your code here:

<script type="text/javascript">
    function setAgencyPrefix() 
    {
        var r = document.getElementById('agency');
        var requestor = r.options[r.selectedIndex].value;
        var a = document.getElementById('agency_abbrev');
        switch (requestor) {
            case 'City of Banks':
                a.value = 'BANKS';
                break;
            case 'City of Beaverton':
                a.value = 'BVT';
                break;
            case 'City of Tigard':
                a.value = 'TIG';
                break;
            case 'City of Tualatin':
                a.value = 'TUAL';
                break;
            default:
                a.value = 'OTHER';
            break;
        }
    }
</script> 

<form>  
    <table>
        <tr>
            <td>
                <input type="text" id="agency_abbrev"> <br>  
                <select onChange="setAgencyPrefix();" id="agency" name="requesting_entity">
                    <option value="City of Beaverton">Beaverton</option>
                    <option value="City of Banks">Banks</option>
                    <option value="City of Tigard">Tigard</option>
                    <option value="City of Tualatin">Tualatin</option>
                </select>   
            </td>  
        </tr>
    </table>
</form>

Please note, in order to get the element, you can use document.getElementById("element_id") or document.forms[0].elements["element_name"].

There is no such thing called document.forms[0].getElementById('element_id')

ml242 · Accepted Answer · 2014-08-28 20:37:15Z

I'm biased against switch statements because Douglas Crockford makes a case against potential fall-through in Javascript the Good Parts.

With an if/else control flow this should work:

function setAgencyPrefix(){
var a;
var r = document.getElementById('agency');
console.log(r.options[r.selectedIndex].value);
var requestor = r.options[r.selectedIndex].value;
if (requester === 'City of Banks'){
  a.value = 'Banks';
  return a
} else if ( requester === 'City of Beaverton'){
  a.value = 'BVT';
  return a;
} else if (requester === 'City of Tigard'){
  a.value = 'TIG';
  return a;
} else if (requester === 'City of Tualatin'){
  a.value = 'TUAL';
  return a
} else {
   a.value = 'OTHER';
  return a;
  }
}

Collectives™ on Stack Overflow

JavaScript: switch statement not setting value in text box

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related