输入表单，输出到iframe URL

Question

我正在尝试进行地图搜索，用户在其中输入所需的位置，该位置显示在下面的iframe中，因此用户寻找伦敦，而该网址会带回google.com/maps&location=london。 到目前为止，我无法使输出部分正常工作。

我觉得我太近了，只是无法解决如何将位置移至iFrame

<div class="search">
<div class="row">       
    <div class="large-6 medium-6 small-12 columns">
        <div class="postcode-wrapper">
            <form class="lookup-form">                  
                <input type="text" class="postcode" placeholder="Location" >
                <input type="submit" class="go-btn" value="Search"/>
                <a  href="#" class="fancybox go" style="position:absolute; left:-99999px" data-fancybox-type="iframe">Search</a>
                <div class="form-error"></div>
            </form>
            <script>
                jQuery('form').submit(function (evt) {
                    evt.preventDefault();
                    var error = false;
                    var error_list = [];

                    var $postcode = jQuery('.postcode').val();

                    if($postcode == ''){
                        error = true;
                        error_list.push('Location is required');
                    }
                    console.log(error);
                    if(error === true){
                        jQuery('.form-error').show();
                        jQuery('.search-results').hide();
                        jQuery('.form-error').html('');
                        for(i=0;i<error_list.length;i++){
                            jQuery('.form-error').append(error_list[i]+'<br/>');
                        }
                    }else if(error === false)  {
                        jQuery('.form-error').hide();
                        jQuery('.postcode-wrapper .go').click(function(){
                            jQuery(".search-results").slideDown("slow");
                        });                         

                        var location = encodeURIComponent(jQuery('.postcode-wrapper .postcode').val());
                        console.log(location);  
                        jQuery('.postcode-wrapper .go').click();                        
                    }
                    return false;
                });
            </script>
        </div>          
    </div>
</div>  
</div>
<div class="search-results">
    <div class="map">       
        <iframe src="http://google.com/maps&location=OUTPUTHERE" width="100%" height="400" frameborder="0"></iframe>
    </div>
</div>

Answer 1

因此，您只需要能够将该位置传递给src？

使用$('#selector').attr('src', value);

另外，您的var声明使用了错误的选择器来获取值。

}else if(error === false)  {
     jQuery('.form-error').hide();
     jQuery('.postcode-wrapper .go').click(function(){
          jQuery(".search-results").slideDown("slow");
     });                         

     var location = encodeURIComponent(jQuery('.postcode').val());  // Fix your selector
     console.log(location);  
     $('iframe').attr('src', 'https://google.com/maps&location=' + location); // Add this
     jQuery('.postcode-wrapper .go').click();                        
}

最后一件事，我认为该网址是错误的，应该为https://www.google.com/maps/place/locationvariable 。