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（）来阻止浏览器只关注链接，您还要将操作放在表单的submit事件中，但是没有提交按钮，并且您没有触发提交事件，所以事件永远不会发生。在这种情况下，您无需提交表单，因此您只需使用链接单击事件即可使用表单中输入的数据打开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>

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

2 个答案: