CODEWITHSUNDEEP
javascripthtmlswitch-statement
David Gassaway
David Gassaway

Reputation: 3

JavaScript: switch statement not setting value in text box

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!

Upvotes: 0

Views: 1016

Answers (3)

ml242
ml242

Reputation: 109

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;
  }
}

Upvotes: 0

Raja CSP
Raja CSP

Reputation: 172

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')

Upvotes: 0

Nightraiser
Nightraiser

Reputation: 309

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.:)

Upvotes: 1

Related Questions