Question

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?

Answer 1

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,