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

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

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> 

Answer 2

试试这个，我改了

var zip = $('#zip').attr("value");

有了这个

var zip = $('#zip').val();

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').val();
                colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600});
                });
            });
        });
</script>