pass form value into iframe using colorbox

[rmelino]

Hello,

 

I have been driving myself crazy to try to do what seems so simple.  I have a form where i ask zip code.  I am using colorbox to popup a lightbox with an iframe after you input your zipcode.  I need to pass the zip code value from the form into the source URL of the iframe.  My form code looks like this:

 

    <div class="form-zip-start">
    <p>Enter your zip code to begin your search:</p>
		<form id="submit" action="#" name="submit" method="post">
        	<input name="zip" id="zip" type="text" value="" class="zip-start" />               
            <div class="form-submit"><a href="/form.htm" rel="zipformSubmit" class="zipformSubmit">Submit</a></div>
        </form>
	</div>

 

My js code looks like this:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/ppc/colorbox/colorbox/jquery.colorbox.js"></script>
<script>
	$(document).ready(function(){
		$("a[rel=zipformSubmit]").click(function() { $("form#submit").submit(function(e) { 
		var zip = $('#zip').attr('value');  
		colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600});
	});
	});
	});
</script>

 

the end result should be an iframe loaded like...src="/form.htm?zip=92108"

 

the 92108 value should be from the form input called 'zip'

 

I can't seem to get the zip code value to pass properly.  Can anyhow show me what i'm doing wrong?

 

Thanks!