jquery - 使用 jquery 将表单值传递到 iframe 的 src url

Question

我一直在逼疯自己去做那些看起来如此简单的事情。我有一张表格，我可以在其中询问邮政编码。在您输入邮政编码后，我使用 colorbox 弹出带有 iframe 的灯箱。我需要将表单中的邮政编码值传递到 iframe 的源 URL 中。我的表单代码如下所示:

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

最终结果应该是一个像...src="/form.htm?zip=92108"这样加载的iframe

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

我似乎无法正确传递邮政编码值。无论如何可以告诉我我做错了什么吗？

谢谢!

Answer 1

您需要使用 PreventDefault() 来防止浏览器简单地跟踪链接，并且您将操作放入表单的提交事件中，但您没有提交按钮，并且没有触发提交事件，所以该事件永远不会触发。在这种情况下，您不需要提交表单，因此您可以简单地利用链接单击事件，使用表单中输入的数据打开 iframe。就像这样

    <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']，您应该添加一个隐藏的表单字段:

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