Passing form values to jQuery lightbox

Question

I am trying to get some values from my form into a lightbox that I am calling. Everything works great if I hard code the form values into the jQuery ajax post but I can't get the form values to properly pass into ajax function unless the values have been selected and the page has been reloaded. So somehow I need to get the values of the forms after they have changed and I can't quite figure it out.

The top function calls my form itemFinder and its values. I have run checkVariables in my jQuery function with an alert before the fancybox call to make sure it works and it does but for some reason after calling the alert it won't hit the fancybox function. I have also tried calling click() and change() functions wrapped around the fancybox and this breaks it as well. Suggestions?

/// AFTER EDIT from 1st answer

$(document).ready(function(){   


            $("#various3").fancybox({
                        ajax : { url: "results.php", type   : "POST", data  : $("form#itemFinder").serialize()},
                        'scrolling'         : 'auto',
                        'overlayOpacity'    : '0'           
                        }               
                    );
          });

<form id="itemFinder" name="itemFinder" method="post" action="results.php" target="">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
    <td valign="top" align="left" colspan="2"><font class="font14"><h3>Local Retailer</h3></font></td>
</tr>
<tr>
    <td><font class="font10">Product:</font></td>
        <td valign="top" align="left">
            <select id="item">
                <option value="" selected="selected">Select ...</option>
                <option value="003160401091">200 mg </option>
                <option value="003160401092">200 mg Value Size </option>
                <option value="003160401100">400 mg </option>
                <option value="003160441107">400 mg Value Size </option>
            </select>
        </td>
</tr>
<tr>
<td><font class="font10">Zip Code:</font></td>
    <td valign="top" align="left">
    <input type="text" name="zip" id="zip" value="" maxlength="5" style="width: 75px" class="font10" />
    </td>
</tr>
<tr>
<td><font class="font10">Distance (mi):&nbsp;&nbsp;</font></td>
    <td valign="top" align="left">
    <select name="radius" id="radius" >
        <option value="">Select ...</option>
        <option value="5">5</option>
        <option value="10" selected >10</option>
        <option value="25">25</option>
        <option value="50">50</option>
    </select>
    </td>
</tr>

<tr><td valign="top" align="right" colspan="3"><a id="various3" href="results.php" class="button">Ajax - passing custom data</a></td></tr>
<tr><td><br /></td></tr>
<tr><td colspan="3" >Please contact your local retailer regarding availability.</td></tr>
</table>
</form>

Answer 1

have a read:

• .serialize()
• .serializeArray()