Как получить значение из поля формы и объединить с URL в 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">'
Источник

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

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

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

Источник

Вы должны изменить 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, тогда установите значение свойства 'src' тега img следующим образом:

$('.bgimg').prop('src', '"https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY')
Источник
Другие вопросы по тегам