I am trying to pass some JavaScript variables that I have assigned to form variables into a query string used by a jQuery plug in called fancybox. If I hard code in the string that I want lightbox works great, however I need it to pass some form values in there to make it work as desire.
<script type="text/javascript">
$(document).ready(function(){
var item = document.itemFinder.item;
var zip = document.itemFinder.zip;
var radius = document.itemFinder.radius;
var dataString = "item=" + item + "&zip=" + zip + "&radius=" + radius;
$("#various3").fancybox({
ajax : { type : "POST", data : dataString},
'scrolling' : 'auto',
'overlayOpacity' : '0'
}
);
});
</script>
What am I doing wrong?
The data parameter expect an object. You're passing a string. Change your call like so:
ajax : { type: "POST", data : {'item': item, 'zip': zip, 'radius': radius}}
That should get it to properly serialize your values for you.
-- Updated --
<script type="text/javascript">
$(document).ready(function(){
$('#someElement').change(function () {
var item = document.itemFinder.item;
var zip = document.itemFinder.zip;
var radius = document.itemFinder.radius;
var dataString = "item=" + item + "&zip=" + zip + "&radius=" + radius;
$("#various3").fancybox({
ajax : { type : "POST", data : dataString},
'scrolling' : 'auto',
'overlayOpacity' : '0'
}
);
});
});
</script>
In my example I'm not sure which event you actually want to bind to (your call), and I'm not sure what other elements are available, but hopefully that makes sense anyway. Thanks,