输入到表单,输出到iframe URL
Input into form, output into iframe URL
我试图获得一个地图搜索,用户输入他们想要的位置,它出现在下面的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。
相关文章:
- iFrame url更改时执行函数
- 嵌入iframe URL以在wordpress中包含当前用户id
- iframe url在浏览器上打开
- 正在确定外部源帧的Iframe URL
- iFrame URL参数到Wordpress中的
- 如果可能的话,刷新后保留iframe url
- 传递数据 id 以引导模式并使用它 iframe url
- 从 iFrame 中每个页面上的 iFrame URL 获取数据
- 如何在javascript var中获取当前的iframe url
- 将 iframe URL 更改为另一个协议会重新加载页面,但在从计时器触发时不会
- 当iframe url更改时,如何更改包装器
- 基于用户输入替换iFrame URL的一部分
- 检查IFRAME URL并重新加载(如果找到)-Javascript
- jQuery加载带有转义字符的本地iframe url,用于disqus注释
- iframe url更改时发出警报
- 防止浏览器在重新加载父级时保留iframe url
- 使用jQuery修改iframe URL
- 通过php或js或jquery获取浏览器url而不是iframe url
- 改变iframe url会改变父窗口的url
- 可以使网页URL相同的iFrame URL