opening a fancybox from a drop down box and passing the selected value to it directly
- by andy
<select name="mySelectboxsituation_found" id="mySelectboxsituation_found">
<option value="100">Firecall</option>
<option value="200">FireAlarm</option>
<option value="300">FireAlarm2</option>
<option value="400">FireAlarm4</option>
</select>
< a href="#" class="incidenttype" name="all" onClick="JavaScript:var dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return true;"/>CLICK HERE < / a>
function cleanUp(){
var subsituation_found1 = $("#fancybox- frame").contents().find('input:radio[name=incident_subcate]:checked').val();
}
$(".incidenttype").fancybox({
'width' : 900,
'height' : 600,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'onCleanup': cleanUp
);
});
clicking on "CLICK HERE" opens the fancybox and transfers the value selected in the drop down box.
What I would like to do is open the fancy box when i change the value in the dropdown box...without having to click on the click here link.....i know it is posisble using something like _this....but i am not sure and am looking for some direction...
ideally some thing like this ...
<select name="mySelectboxsituation_found" id="mySelectboxsituation_found" onChange="JavaScript:var dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return true;">
<option value="100">Firecall</option>
<option value="200">FireAlarm</option>
<option value="300">FireAlarm2</option>
<option value="400">FireAlarm4</option>
</select>
does any have an idea how to do it....
I have also tried...
function test_fan()
{ alert(document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value);
var dropval =document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value; return dropval;
}
$(document).ready(function(){
$("#autostart").fancybox({
'onStart':test_fan,
'width': 800,
'height': 700,
'type': 'iframe',
href:'main_situation_found.php?incident_maincateid='+document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value
});
<a href="#" id="autostart" style="display:none"></a>
<form><select id="mySelectboxsituation_found" onchange="$('#autostart').trigger('click');">
<option value="">select</option>
<option value="100">option 1</option>
<option value="200">trigger</option>
<option value="300">option 3</option>
<option value="400">option 4</option>
</select> </form>
the really funny that happens there is that ....
on the alert id do get the value i selected so if i
selected alert fancybox window
100 100 nothing shows up empty
200 200 100
300 300 200
400 400 300
the fancybox seems to me the the previously selected values and i am not sure why that is happening...
thanks
andy
