I have a drop-down list which when selected changes href links in a number of different 'a' tags. The issue is that sometimes the links point to a page that is yet to be generated, when this happens, the user clicks on the link and it goes to a 404 page, or worse still an error page which just isn't professional.
What I want to do is to add some script so that if the link doesn't exist yet, nothing happens (ie the link does not send the user to the page).
I know there are some similar queries (ie using javascript to detect whether the url exists before display in iframe) however, as my links are dynamic I haven't come across a solution.
A simplified version of my code is below:
<select name="Color" id="selection"
onchange="document.getElementById('link1').href = LinkName1[this.value];
document.getElementById('link2').href = LinkName2[this.value];
document.getElementById('link3').href = LinkName3[this.value];"
onload="document.getElementById('link1').href = LinkName1[this.value];
document.getElementById('link2').href = LinkName2[this.value];
document.getElementById('link3').href = LinkName3[this.value];">
<option value="3">OPTIMUM</option>
<option value="1">ROUND 1</option>
<option value="2">ROUND 2</option>
<option value="3">ROUND 3</option>
</select>
<a id="link1" href="www.example.com" target="_blank"><div id="title1" style="display: inline-block;">Link 1</div></a>
<a id="link2" href="www.example.com" target="_blank"><div id="title2" style="display: inline-block;">Link 2</div></a>
<a id="link3" href="www.example.com" target="_blank"><div id="title3" style="display: inline-block;">Link 3</div></a>
<script>var LinkName1 = {"1" : "www.example.com/1","2" : "www.example.com/2","3" : "www.example.com/3",};</script>
<script>var LinkName2 = {"1" : "www.example.com/4","2" : "www.example.com/5","3" : "www.example.com/6",};</script>
<script>var LinkName3 = {"1" : "www.example.com/7","2" : "www.example.com/8","3" : "www.example.com/9",};</script>
<script>window.onload = function(){
document.getElementById('link1').href = LinkName1[document.getElementById('selection').value];
document.getElementById('link2').href = LinkName2[document.getElementById('selection').value];
document.getElementById('link3').href = LinkName3[document.getElementById('selection').value];}</script>
Any help on this would be very much appreciated.
