call onchange from script not html

Hi, I have a working script that allows me to swap html based on a dropdown selection. Currently the function is called in the html on the select tag. Since I am working with a templating language i do not have the ability to add onchange to the select tag since the tag is dynamically generated.

I can't seem to figure out how to get the onchange event working from the script itself.

<html>
<head>
<title>Swap HTML</title>
<script>
function swap() {
var countryValue = document.getElementById('cntry').value;
var stateDiv = document.getElementById('stateField');
if (countryValue == 'United States') {
stateDiv.innerHTML='<label for="state">state/county:</label> <select name="state" id="state"><option value="AA">Select a state...</option><option value="NY">New York</option><option value=AZ>Arizona</option></select>';
} else if (countryValue == 'United Kingdom') {
stateDiv.innerHTML='<label for="state">state/county:</label> <input type="text" name="state">';
}
}
</script>
</head>
<body>
<form name="test1">
<div id="stateField"><label for="state">state/county:</label> <input type="text" name="state"></div>
<div id="cntryField"><label for="cntry">country:</label> <select name="cntry" id="cntry" onchange="swap();"><option value="BB">Select a country...</option><option value="United States">United States</option><option value="United Kingdom">United Kingdom</option></select></div>
<input type="button" name="submit" value="submit">
</form>
</body>
</html>

So in short I need to remove the onchange event from the select tag and somehow make it actionable in the script tag.

I tried adding this function and using onload event on the body tag but it didn't work though firebug gave me back no errors...

function loadSwap() {
if (document.getElementById('cntry').onchange) {
swap();
}
}

call onchange from script not html

syktek

syktek

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week