задача тестовая

[Nastya251985]

Допустим, что по url http://любой_домен/filter?...cturer=aaa,eee находится страница, на которой есть такие поля:
● радио для size (значения - S, M, L)
● несколько чекбоксов для color (значения - 1, 2, 3, 4, 5)
● мультиселект (select multiple) для manufacturer (значения - "aaa", "b&c", "ddd", "eee")
● чекбокс "распродажа" (значение - 1)
Допустим также, что сервер при генерации html ни одно из полей не заполняет, то есть радио не выбран, чекбоксы пустые и т.д.

Задача: набросать самую элементарную разметку для указанных инпутов и написать скрипт, который
● при загрузке страницы разберёт значения фильтров из url и расставит их по соответствующим полям

ПОМОГИТЕ СО 2-ЫМ ПУНКТОМ. Совсем запуталась.
● при изменении состояния в любом инпуте, кроме "распродажа", выведет в консоль аналогичный приведённому в условии url с актуальными значениями фильтров

[Nastya251985]

<form class="block">

<div id="size">
<h4>Size</h4>
<p><input type="radio" id='size1' name='size' value="S">S</p>
<p><input type="radio" id='size2' name='size' value="M">M</p>
<p><input type="radio" id='size3' name='size' value="L">L</p>
</div>


<div id="color">
<h4>Color</h4>
<p><input type="checkbox" id='color1' name='color' value="1">1</p>
<p><input type="checkbox" id='color2' name='color' value="2">2</p>
<p><input type="checkbox" id='color3' name='color' value="3">3</p>
<p><input type="checkbox" id='color4' name='color' value="4">4</p>
<p><input type="checkbox" id='color5' name='color' value="5">5</p>
</div>


<h4>Manufactura</h4>
<p><select multiple="multiple" name="manufactura" id="manufactura">
<option>aaa</option>
<option>b&c</option>
<option>ddd</option>
<option>eee</option>
</select></p>

<!-- Checkbox sale -->
<div class="sale">
<p><input type="checkbox" name="sale" value="распродажа">Распродажа</p>
</div>
</form>

<script>

// === part 1


const checkboxes = document.querySelectorAll('[name="color"]');
const radios = document.querySelectorAll('[name="size"]');
const options = document.querySelectorAll('[name="manufactura"] option');


let url = new URL('http://somesite.com/filter?size=S&color=1,2&manufacturer=aaa,eee');

console.log(`First Url: ${url}`);


let search = new URLSearchParams(url.search);

let size = search.get('size');

let colors = search.get('color').split(',');

let manufacturers = search.get('manufacturer').split(',');


let len1 = checkboxes.length;

let len2 = colors.length;

let len3 = radios.length;

let len4 = manufacturers.length;

let len5 = options.length;

for (let i = 0; i < len1, i < len3; i++) {

if (radios[i].value == size) radios[i].checked = true;

for (let j = 0; j < len2; j++) {

if (checkboxes[i].value == colors[j]) checkboxes[i].checked = true;

};

};

options.forEach(el => {

if (manufacturers.includes(el.value)) el.selected = true;

});


// ===== part 2


document.getElementById("color").addEventListener( 'input', createNewUrl);
document.getElementById('size').addEventListener(' input', createNewUrl);
document.getElementById('manufactura').addEventLis tener('input', createNewUrl);

const urlObj = {};
urlObj.first_part_url = `http://Somesite.com/filter?`;
urlObj.size_part_url = 'size=';
urlObj.color_part_url = '&color=';
urlObj.manufacturer_part_url = '&manufacturer=';


function createNewUrl() {

// КАКОЙ ЦИКЛ ЗДЕСЬ СОЗДАТЬ?????

urlObj.size_part_url = `size=${let_size}`;
urlObj.color_part_url = `&color=${let_color}`;
urlObj.manufacturer_part_url = `&manufacturer=${let_manuf}`;
urlObj.full_url = urlObj.first_part_url + urlObj.size_part_url + urlObj.color_part_url + urlObj.manufacturer_part_url;
consoleLog(urlObj.full_url);
}

function consoleLog(url) {
console.log(`Second Url: ${url}`);
}


</script>

[Malleys]

при изменении состояния в любом инпуте... выведет в консоль аналогичный приведённому в условии url с актуальными значениями фильтров

addEventListener("input", ({ target }) => {
	if(!target.matches("form [name]")) return;

	const url = `${new URLSearchParams(new FormData(target.form))}`;

	console.log(url);
});

инпуте, кроме "распродажа"

тогда ему не нужен атрибут name

при загрузке страницы разберёт значения фильтров из url и расставит их по соответствующим полям

const search = new URLSearchParams(location.search);

for(const [key, value] of search) {
	const e = document.querySelector("form").elements[key];
	if(!e) continue;

	switch(e.constructor) {
		case RadioNodeList:
			for(const node of e) {
				if(node.value === value)
					node.checked = true;
			}
			break;

		case HTMLSelectElement:
			for(const option of e) {
				if(option.value === value)
					option.selected = true;
			}
			break;

		case HTMLInputElement:
			e.value = value;

			if(e.type === "checkbox")
				e.checked = true;
			break;
	}
}

набросать самую элементарную разметку

вместо <P> в данном случае нужно использовать <LABEL>
весь пример целиком

<form>
	<fieldset>
		<legend>Size</legend>
		<label><input type="radio" name="size" value="S">S</label>
		<label><input type="radio" name="size" value="M">M</label>
		<label><input type="radio" name="size" value="L">L</label>
	</fieldset>
	
	<fieldset>
		<legend>Color</legend>
		<label><input type="checkbox" name="color" value="1">1</label>
		<label><input type="checkbox" name="color" value="2">2</label>
		<label><input type="checkbox" name="color" value="3">3</label>
		<label><input type="checkbox" name="color" value="4">4</label>
		<label><input type="checkbox" name="color" value="5">5</label>
	</fieldset>
	
	<fieldset>
		<legend>Manufacturer</legend>
		<select multiple name="manufacturer">
			<option>aaa</option>
			<option>b&amp;c</option>
			<option>ddd</option>
			<option>eee</option>
		</select>
		<label><input type="checkbox" data-name="sale" value="распродажа">Распродажа</label>
	</fieldset>
</form>

<script>
	
// const search = new URLSearchParams(location.search); // на самом деле нужно это, но для теста строка ниже
const search = new URLSearchParams("size=M&color=1&color=2&manufacturer=aaa&manufacturer=eee");

for(const [key, value] of search) {
	const e = document.querySelector("form").elements[key];
	if(!e) continue;

	switch(e.constructor) {
		case RadioNodeList:
			for(const node of e) {
				if(node.value === value)
					node.checked = true;
			}
			break;

		case HTMLSelectElement:
			for(const option of e) {
				if(option.value === value)
					option.selected = true;
			}
			break;

		case HTMLInputElement:
			e.value = value;

			if(e.type === "checkbox")
				e.checked = true;
			break;
	}
}

addEventListener("input", ({ target }) => {
	if(!target.matches("form [name]")) return;

	const url = `${new URLSearchParams(new FormData(target.form))}`;

	console.log(url);
});
	
</script>

[рони]

Malleys,

[Nastya251985]

Malleys,
спасибо тебе огромное! Очень просто всё описано. Только в задании в url значения должны выводиться через запятую, т.е. через метод split, либо subatring(если правильно поняла свойства).