如何從表單字段獲取值並在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。 該線程的可能重復（您將在那里找到詳細的答案）： 使用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。