使用jQuery将表单值传递到iframe的src url中 [英] pass form value into src url of iframe with jquery

问题描述

我一直在疯狂地尝试去做看起来如此简单的事情.我有一个询问邮政编码的表格.输入邮政编码后，我正在使用Colorbox弹出带有iframe的灯箱.我需要将邮政编码的值从表单传递到iframe的源URL中.我的表单代码如下:

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>

我的js代码如下:

<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>

最终结果应该是加载的iframe，如... src ="/form.htm?zip = 92108"

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

92108值应来自名为"zip"的表单输入

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?

谢谢！

推荐答案

您需要使用preventDefault()来防止浏览器简单地跟随链接，而且您也将操作放入了表单的Submit事件中，但是没有提交按钮，并且您不会触发提交事件，因此该事件永远不会触发.在这种情况下，您无需提交表单，因此只需使用链接单击事件即可使用在表单中输入的数据打开iframe.像这样

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> 

注意:if (zip.length > 0) { }等

在评论后添加:

为了输入您的$_GET['Source']，您应该添加一个隐藏的表单字段:

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>

然后制作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> 

这篇关于使用jQuery将表单值传递到iframe的src url中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！