Trying to create two dropdown lists where the 2nd has a dependency on the first, and the second contains URL values with a GO button that goes to the URL. For example - choose from a list of a few states, then choose from a list of a few cities in the selected state (not selectable until you choose a state), then hit a submit button that goes to the URL for that City's page. Preferably no JQuery. I've given it a shot with the 2nd "MA" store going to a url, but the url part isn't working. Any help would be appreciated. Thanks! https://jsfiddle.net/mkallis/xws1ykto/67/
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
});
function goToNewPage()
{
var url = document.getElementById('store').value;
if(url != 'none') {
window.location = url;
}
}
</script>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">Select state</option>
<option value="ma">MA</option>
<option value="me">ME</option>
<option value="nh">NH</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>Select a store</option>
<!-- MA -->
<option rel="ma" value="ma_store_1">MA Store 1</option>
<option rel="ma" value="http://www.google.com">MA Store 2</option>
<option rel="ma" value="ma_store_3">MA Store 3</option>
<option rel="ma" value="ma_store_4">MA Store 4</option>
<option rel="ma" value="ma_store_5">MA Store 5</option>
<!-- ME -->
<option rel="me" value="me_store_1">ME Store 1</option>
<option rel="me" value="me_store_2">ME Store 2</option>
<option rel="me" value="me_store_3">ME Store 3</option>
<option rel="me" value="me_store_4">ME Store 4</option>
<option rel="me" value="me_store_5">ME Store 5</option>
<!-- MH -->
<option rel="nh" value="nh_store_1">NH Store 1</option>
<option rel="nh" value="nh_store_2">NH Store 2</option>
<option rel="nh" value="nh_store_3">NH Store 3</option>
<option rel="nh" value="nh_store_4">NH Store 4</option>
<option rel="nh" value="nh_store_5">NH Store 5</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
The issue here likely has to do with when/how JSFiddle injects the script you defined in the js section. Opening the console, and clicking submit it said that the function wasn't defined, meaning at the time the submit button was created it had no idea what that function was.
To prove this is, I moved the definition of that function to html, before the submit button and it works.
<script> function yourfunction(){} </script>
<form>
<!-- yourfunction guaranteed to be defined here -->
<button onclick="yourfunction()"></button>
</form>