输入到表单，输出到iframe URL

Input into form, output into iframe URL

本文关键字：iframe URL 输出 表单 输入      更新时间：2023-09-26

我试图获得一个地图搜索，用户输入他们想要的位置，它出现在下面的iframe中，所以用户寻找伦敦和URL将带回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>

所以你只需要能够将位置传递给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。

相关文章：