Как получить значение из поля формы и объединить с URL в JQuery

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> 

Но, к сожалению, это не работает и для этого требуются некоторые указатели.

UPDATE: Я пытаюсь этот метод для достижения этой цели, но не работает

$body.append('<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + " " + $('#city').val() + "&key=ABC">' 

Answer 1

Вы можете сделать что-то вроде этого:

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); 
}); 

Обратите внимание, что у вас не должно быть атрибута src в HTML, иначе браузер запустит запрос на недопустимый источник.

Также убедитесь, что вы проверяете пользовательские входы и что у вас есть jQuery.

Answer 2

Вы должны изменить СРК вашего изображения на форме представить. Возможный дубликат этой нити (вы найдете подробный ответ там): 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();">