輸入表單，輸出到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 。