HTML Pattern Attribute clashes with Javascript

[Sir Youri]

I have a \[code\]<form>\[/code\] in which I have a \[code\]<Select>\[/code\]and a \[code\]<input type="text">\[/code\]. The input type has a \[code\]pattern\[/code\] attribute and the \[code\]id\[/code\] value of the \[code\]<select>\[/code\] is used to select the relevant javascript file depending on the user's selection.However I've noticed that both features do not work together and depending on the value of the \[code\]id\[/code\] either the \[code\]pattern\[/code\] attribute works or the right javascript file is chosen. if the \[code\]pattern\[/code\] attribute works then a 405 error is thrown.This is the relevant \[code\]html\[/code\] and \[code\]javascript\[/code\] files:\[code\]<form id="aForm"> <select name="analysis1" id="twitterAnalysis"> <option value="" disabled="disabled" selected="selected">Select Analysis</option> <option value="http://stackoverflow.com/questions/14078088/distance">Tweet analysis by Distance</option> <option value="http://stackoverflow.com/questions/14078088/clustered">Tweet analysis by GeoClustering</option> <option value="http://stackoverflow.com/questions/14078088/graph">Tweet analysis by TweetDensity</option> </select> <input type="text" style="width:285px" placeholder="Enter A Precise Address" name="address0" id="address" pattern="[ a-zA-Z0-9,#.-]+" maxlength="100" title="Standard address notation only"/> <input type="submit" id="open" value="http://stackoverflow.com/questions/14078088/Start Analysis"/> <input type="button" id="close"value="http://stackoverflow.com/questions/14078088/Stop"/> </form>?\[/code\]The Javascript:\[code\]function loadScript(filename, callback) { var fileref = document.createElement('script'); fileref.setAttribute("type", "text/javascript"); fileref.onload = callback; fileref.setAttribute("src", filename); if (typeof fileref != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileref) }}$(document).ready(function() { $("#analysis").bind("change", function() { if (document.getElementById("analysis").value =http://stackoverflow.com/questions/14078088/="distance") { loadScript('/static/highCharts.js', function() { console.log('done loading'); }); } else if (document.getElementById("analysis").value =http://stackoverflow.com/questions/14078088/="clustered") { loadScript('/static/geoClusters.js', function() { console.log('done loading'); }); } else { loadScript('/static/tweetDensity.js', function() { console.log('done loading'); }); } });});?\[/code\]So in this instance only the \[code\]pattern\[/code\] attribute works. However if I change the \[code\]<select>\[/code\] \[code\]id value\[/code\] to analyses and also in the relevant places in the javascript then the \[code\]pattern\[/code\] attribute does not work but the right javascript files are selected.FURTHERMORE:If I don't select anything in the \[code\]<select name="analysis" id="analyses">\[/code\] then the \[code\]pattern\[/code\] attribute works.JSFiddle demo: http://jsfiddle.net/peD3t/15/