[英]How to get value from form field and concatenate with url in Jquery
我今天第一次使用jquery,需要帮助解决这个问题。 对于那里的所有专业人士来说,这个问题可能听起来很愚蠢,但我正在努力。
我在HTML页面中有一个表单字段,并希望从表单字段中获取值并与URL连接。
<form id="form-container" class="form-container">
<label for="street">Street: </label><input type="text" id="street" value="">
<label for="city">City: </label><input type="text" id="city" value="">
<button id="submit-btn">Submit</button>
</form>
这是标签,我想添加街道和城市的价值。
<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=White House, Washington DC&key=API_KEY">
</body>
基本上,此src
的位置字段将来自表单字段。 所以这样的事情:
<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + "," + $('#city').val()&key=API_KEY">
</body>
但不幸的是,这不起作用,需要一些指针来解决这个问题。
更新:我正在尝试这种方法来实现这一目标但不起作用
$body.append('<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + " " + $('#city').val() + "&key=ABC">'
您应该在表单提交时修改图像的src。 该线程的可能重复(您将在那里找到详细的答案): 使用jQuery更改图像源
所以类似于:
function setSrc(){
$('.bgimg').prop('src','https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY');
}
<form id="form-container" class="form-container" onSubmit="setSrc();">
如果你需要使用jQuery,那么设置img标签的'src'属性的值如下:
$('.bgimg').prop('src', '"https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY')
你可以这样做:
var url = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location={street},{city}&key=API_KEY";
$("#submit-btn").on('click', function() {
var street = $('#street').val();
var city = $('#city').val();
var finalURL = url.replace('{street}', street).replace('{city}', city);
$('.bgimg').attr('src',finalURL);
});
请注意,您不应在HTML
设置src
属性,否则浏览器将触发对无效源的请求。
还要确保验证用户输入和jQuery。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.