Question

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!

Answer 1

You need to use preventDefault() to prevent the browser from simply following the link, also you are putting your actions inside the submit event of your form, but you have no submit button, and you are not triggering the submit event, so that event never fires. In this case you don’t need to submit the form, so you can simply make use of the link click event to open the iframe using the data entered in the form. Like so

    <script> 
        $(document).ready(function() { 
        $("a[rel=zipformSubmit]").click(function(e) { 
            e.preventDefault();
             var zip = $('#zip').val();
alert("about to open colorbox with zipcopde " + zip);
            $.colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
        }); 
        });  </script> 

Note: some validation would be good if (zip.length > 0) { } etc

Added after Comment:

IN order to bring in your $_GET['Source'] you should add a hidden form field:

    <div class="form-zip-start">
        <p>Enter your zip code to begin your search:</p>
        <form id="submit" action="#" name="submit" method="post">
<input type='hidden' name='source' id='source' value='<?php echo $_GET['Source']; ?>' />
            <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>

then make the js:

<script> 
            $(document).ready(function() { 
            $("a[rel=zipformSubmit]").click(function(e) { 
                e.preventDefault();
                 var zip = $('#zip').val();
                 var source = $('#source').val();
    alert("about to open colorbox with zipcopde " + zip);
                $.colorbox({href: "?source="+source+"&zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
            }); 
            });  </script>