У меня есть простая веб-форма HTML, позволяющая найти конкретный магазин на Картах Google, просто введя почтовый индекс или название города. Форма поиска должна быть ориентирована на карту следующим образом:
https://www.google.com/maps/search/storename+cityname
Поскольку люди знают, что получат результаты только по названию магазина, они пишут во входном тексте только почтовый индекс или название города, поэтому название магазина скрыто, но анализируется после нажатия кнопки «Отправить».
Я пытаюсь добиться этого следующим образом:
<form action = "https://www.google.com/maps/search/storename+city" method = "get">
<input type = "text" name = "city"><input type = "submit">
</form>
Есть идеи, как этого добиться?
Допустим, название магазина: Apple. Люди будут вводить только название города, например Майами (в текстовом поле), и форма каким-то образом перенаправит пользователя на https://www.google.com/maps/search/apple+miami
🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).
Судя по вашему комментарию, этого будет достаточно. Я использую jQuery, так как он есть в тегах вашего вопроса.
const mapLink = "https://www.google.com/maps/search/Apple+Store+";
$(document).ready(function() {
$("form").on("submit",function(e) {
e.preventDefault();
window.location.href = mapLink + $("input[name='city']").val();
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form action = "https://google.com/maps/search/foo+bar" method = "GET">
<input type = "text" name = "city" value = "">
<input type = "submit">
</form>Ванильное JS-решение
const mapLink = "https://www.google.com/maps/search/Apple+Store+";
document.addEventListener("DOMContentLoaded",function(){
const frm = document.querySelector("form");
frm.addEventListener("submit",function(e) {
const inp = document.querySelector("input[name='city']");
e.preventDefault();
window.location.href = mapLink + inp.value;
});
});<form action = "https://google.com/maps/search/foo+bar" method = "GET">
<input type = "text" name = "city" value = "">
<input type = "submit">
</form>Несколько советов - я бы добавил в форму какой-нибудь уникальный идентификатор (например, id). Это сделано для того, чтобы вы выбрали именно ту форму, которую хотите, а не первую, которая будет найдена на вашем сайте (что и делает document.querySelector).
Альтернативным подходом, отличным от описанного выше, может быть перехват отправки формы и изменение действия формы перед продолжением процесса отправки формы.
/*
within the context of the delegated event handler,
`this` refers to the actual form. Using dotted
notation to refer to form elements by name
makes it clean and easy to understand.
*/
document.forms.search.addEventListener('click', function(e) {
if ( e.target instanceof HTMLInputElement && e.target.type=='submit' ) {
e.preventDefault();
if ( this.city.value != '' ) {
this.action=`${this.action}/${this.store.value}+${this.city.value}`;
this.target='_blank';
this.submit();
}
}
})<form name='search' action='https://www.google.com/maps/search'>
<!-- If the "store" is constant, add as a hidden input -->
<input type='hidden' name='store' value='Apple' />
<input type='text' name='city' />
<input type='submit' />
</form>