Hi all,
I’ve created a chained select using an excellent plugin by Mika Tuupola - http://www.appelsiini.net/download/jquery.chained.js
I’m trying to add a simple ‘onclick’ event to the download button so that it opens up the option value (a linked file) in a new tab - but I cant get anything to work.
I’ve stripped it down here - http://jsfiddle.net/valleysboy/cB8yB/
The page its based on is here - http://www.cypsp.org/information.htm
Any help would be much appriciated!
Hi there,
You can do it like this:
$(document).ready(function() {
$("#area").chained("#geography");
$("#download").on("click", function(e){
e.preventDefault();
window.open($("#area").val());
});
});
Here’s a demo.
Here’s the full code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chained Select demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form name="monitoring-report" action="" method="get" target="_blank" onsubmit="return validate_form()">
<select name="geography" id="geography">
<option value="">Choose a geographic level</option>
<option value="outcomes">Outcomes Level - LGD</option>
<option value="locality">Locality level - Ward</option>
</select>
<select name="area" id="area">
<option selected>Please select a report</option>
<option value="publications/monitoring/ni/cypsp_northern_ireland_monitoring-2011.pdf" class="outcomes">N.Ireland</option>
<option value="publications/monitoring/outcome-groups/cypsp_belfast_locality_monitoring-2012.pdf" class="outcomes">Belfast</option>
<option value="publications/monitoring/outcome-groups/cypsp_northern_locality_monitoring-2012.pdf" class="outcomes">Northern</option>
<option value="publications/monitoring/outcome-groups/cypsp_south-eastern_locality_monitoring-2012.pdf" class="outcomes">South-Eastern</option>
<option value="publications/monitoring/outcome-groups/cypsp_southern_locality_monitoring-2012.pdf" class="outcomes">Southern</option>
<option value="publications/monitoring/outcome-groups/cypsp_western_locality_monitoring-2012.pdf" class="outcomes">Western</option>
<!--locality reports-->
<option value="publications/monitoring/outcome-groups/cypsp_belfast_locality_monitoring-2012.pdf" class="locality">Belfast</option>
<option value="publications/monitoring/outcome-groups/cypsp_northern_locality_monitoring-2010.pdf" class="locality">Northern</option>
<option value="publications/monitoring/outcome-groups/cypsp_south-eastern_locality_monitoring-2010.pdf" class="locality">South-Eastern</option>
<option value="publications/monitoring/outcome-groups/cypsp_southern_locality_monitoring-2012.pdf" class="locality">Southern</option>
<option value="publications/monitoring/outcome-groups/cypsp_western_locality_monitoring-2012.pdf" class="locality">Western</option>
<option value="publications/monitoring/locality-groups/fermanagh_monitoring-2012.pdf" class="locality">Fermanagh</option>
<option value="publications/monitoring/locality-groups/south-armagh_monitoring-2012.pdf" class="locality">South Armagh</option>
</select>
<input name="download" type="submit" value="Download" class="button info" id="download"/>
</form>
<script>
// Chained - jQuery non AJAX(J) chained selects plugin
(function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
var self = this;
var backup = $(self).clone();
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
$(parent_selector).each(function() {
selected += "\\\\" + $(":selected", this).val();
});
selected = selected.substr(1);
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
if ( !$("option:selected", this).length ) {
$("option", this).first().attr("selected", "selected");
}
$(this).trigger("change");
});
});
};
$.fn.chainedTo = $.fn.chained;
})(jQuery);
$(document).ready(function() {
$("#area").chained("#geography");
$("#download").on("click", function(e){
e.preventDefault();
window.open($("#area").val());
});
});
</script>
</body>
</html>
Pullo - Yet again thank you - I must have a confilct though with another js script as its not working on the page I intened it for - i shall track back and test.
No probs 
If you can post a link, I don’t mind taking a look.
Really appriciate - http://www.cypsp.org/information.htm
PS If possible could you help how I debug - using firebug yet still not getting to grips with the js console.
Chained code possible cause?
<script type="text/javascript">
$("#area").chained("#geography"); /* or $("#area").chainedTo("#geography"); */
</script>
Oh right, that was your page. Sorry, you posted that before.
The problem seems to be on line 332, you have commented out the beginning of a function:
<!--function validate_form() {
which is causing a syntax error.
Try fixing this and then seeing if that makes a difference.
Sure. Open Firebug, click on “Console” and make sure the “Errors” tab is selected.
You might also want to check out Chrome for debugging purposes. I wrote a short blog post on how to do this.
This is all brilliant - okay removed comment from another search form yet now the validate which produces a pop up is activating on the search form we’re disucsing above strange?
I’ll keep plugging away - your a big help!
(Update)
Took out the whole validation script and still no joy - form is opening up same page in new tab ---- aggghhhhhhhhhh!!!
Hi there,
The code I mentioned above still seems to be commented out.
Now when I open Chrome’s devTools I see.
Uncaught SyntaxError: Unexpected token } information.htm:343
Uncaught ReferenceError: report is not defined information.htm:282
Uncaught ReferenceError: validate_form is not defined information.htm:259
This is the original error and two new ones.
On the bright side of things, it seems that the chained select is now working
Sorry testing locally can’t upload directly out to live server until tonight (corporate network)…
Ah ok. Well, good luck!
Let me know if you need any more help.
Thanks Pullo i’ll post any developments - thanks!
Okay got there in THE END!!! weird though the only problem seems to be;
onsubmit="return validate_form()
but when I deleted this the first time it did’nt work??? Very strange but it now works locally - will test on live server and publish.