如何从表单字段中获取值并在 Jquery 中与 url 连接

Question

我今天第一次使用 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">'

Answer 1

您应该在表单提交时修改图片的 src。这个线程可能重复（你会在那里找到详细的答案）：Changing the image source using 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();">

Answer 2

如果您需要使用 jQuery 执行此操作，请像这样设置 img 标签的 'src' 属性的值：

$('.bgimg').prop('src', '"https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY')

Answer 3

你可以这样做：

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。

如何从表单字段中获取值并在 Jquery 中与 url 连接

How to get value from form field and concatenate with url in Jquery

javascript

ajax

jquery

formfield