#javascript #html #forms #query-string #auto-populate
Вопрос:
У меня очень мало опыта в программировании, но, как правило, я быстро учусь и изучаю все по частям, чтобы узнать, как создать несколько простых вещей, которые мне нужны для веб-страницы. Я хочу иметь возможность автоматически заполнять форму, используя строки запроса в моем URL-адресе (т. Е. Чтобы пример.com?цвет=синий автоматически загружал форму с опцией «синий», уже заполненной в разделе формы «цвет»). Вот часть моего html-кода, которая создает форму:
lt;form id="wsite-com-product-options"gt; lt;div class="wsite-com-product-option-groups"gt; lt;div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo"gt; lt;label class="wsite-com-product-label " for="wsite-com-product-option-Photo"gt; lt;b class="wsite-com-product-title"gt;Photolt;/bgt; lt;/labelgt; lt;select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" gt; lt;option selected="selected" value=""gt;--lt;/optiongt; lt;option class="wsite-com-dropdown" value="Pelicans"gt; Pelicans lt;/optiongt; lt;option class="wsite-com-dropdown" value="Dolphins"gt; Dolphins lt;/optiongt; lt;option class="wsite-com-dropdown" value="Rams"gt; Rams lt;/optiongt; lt;/selectgt; lt;/divgt; lt;/divgt; lt;/formgt; Поэтому я подумал, что если я введу URL-адрес для своего веб-сайта, а затем ?Фото=Пеликаны или ?Фото=Дельфины, эта форма будет автоматически заполнена ответом «Пеликаны» или «Дельфины» соответственно. Очевидно, что это не сработало, и теперь я понимаю, что мне нужен какой-то код javascript, чтобы строка запроса работала таким образом? Но я уже пару недель пытаюсь понять, как это сделать, изучая каждый соответствующий пример кода, который я мог найти, строка за строкой, чтобы попытаться понять, что они делали, и ничего из этого не сработало. Существует ли относительно простой код, который выполнял бы эту функцию, или я просто полностью не в себе, как новичок здесь?
Комментарии:
1. Вы имеете в виду, что хотите изменить атрибут формы
hrefна основе вашего выпадающего списка? Я хотел бы знать, чего именно вы пытаетесь достичь с его помощью?2. @groovy_guy Нет, я просто хочу, чтобы выбор был уже заполнен на основе параметров строки запроса. В принципе, я хочу иметь возможность предоставить кому-либо URL-адрес со строками запроса, чтобы нужный им параметр был уже выбран при открытии страницы, а не для того, чтобы им самим приходилось находить опцию в меню. (т. Е., если им нужна фотография пеликанов, я могу дать им URL-адрес mywebsite.com/Photo=Pelicans, что не только приведет их к mywebsite.com но также уже есть Пеликаны, заполненные в качестве ответа в выпадающем списке для формы фотографии, когда они открывают веб-сайт таким образом.)
Ответ №1:
Предполагая, что вы пытаетесь извлечь свой параметр из текущего URL-адреса, предоставленного вашим пользователям, и соответственно выбираете элемент.
Я написал для вас код javascript. проверьте, работает ли это. В случае, если вы хотите использовать текущее URL обновление URL в javascript с window.location.href .
var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url) var url = new URL(url_string); var c = url.searchParams.get("photo"); document.querySelector('option[value="' c '"]').selected = true console.log(c); lt;form id="wsite-com-product-options"gt; lt;div class="wsite-com-product-option-groups"gt; lt;div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo"gt; lt;label class="wsite-com-product-label " for="wsite-com-product-option-Photo"gt; lt;b class="wsite-com-product-title"gt;Photolt;/bgt; lt;/labelgt; lt;select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" gt; lt;option selected="selected" value=""gt;--lt;/optiongt; lt;option class="wsite-com-dropdown" value="Pelicans"gt; Pelicans lt;/optiongt; lt;option class="wsite-com-dropdown" value="Dolphins"gt; Dolphins lt;/optiongt; lt;option class="wsite-com-dropdown" value="Rams"gt; Rams lt;/optiongt; lt;/selectgt; lt;/divgt; lt;/divgt; lt;/formgt;