There are a couple of issues with your code. Firstly you link to the jquery.js file 3 times and also don't seem to close each set of <script> tags with your additional javascript coding. You also have extra spaces in the option values, which would cause conflict when javascript attempts to compare the values. And your jquery selector for the button aims at a class called 'Button' but it seems your button uses a class called 'Button3'.
Obviously I made all of those corrections and adjusted your code to be a little more compact and uniform.
HTML Code:
<!DOCTYPE html>
<head>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="dropdown"]').change(function() {
$(".Button").unbind();
if($(this).val() == "3") {
$(".Button").click(function(){alert("3");});
} else {
if($(this).val() == "4") {
$(".Button").click(function(){alert("4");});
} else {
if($(this).val() == "5") {
$(".Button").click(function(){alert("5");});
} else {
if($(this).val() == "6") {
$(".Button").click(function(){alert("6");});
}
}
}
}
});
});
</script>
</head>
<body>
<form action="" style="position:absolute; top:30px; left:30px; border:3px solid Gray">
SELECT DISK:
<select name="dropdown">
<option value="3">3 Disk</option>
<option value="4">4 Disk</option>
<option value="5">5 Disk</option>
<option value="6">6 Disk</option>
</select>
</form>
<input class="Button" type="button" value="SOLVE" style="position: absolute; top: 90px; left: 90px; font-weight: bolder; border: 3px solid Gray;" />
</body>
</html>
But I should point out it only sets the onclick event for the button when you change the value of the select box. This means when the page loads there will be no action set. You would have to insert a bit of extra code in the document.ready function to run a one time check and initially set the button's onclick value.
"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"
Reply With Quote
Bookmarks