Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2019, 00:28
Новичок на форуме
Отправить личное сообщение для Nastya251985 Посмотреть профиль Найти все сообщения от Nastya251985
 
Регистрация: 11.01.2019
Сообщений: 9

задача тестовая
Допустим, что по 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, 15.01.2019 в 00:31.
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2019, 00:28
Новичок на форуме
Отправить личное сообщение для Nastya251985 Посмотреть профиль Найти все сообщения от Nastya251985
 
Регистрация: 11.01.2019
Сообщений: 9

<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>

Последний раз редактировалось Nastya251985, 15.01.2019 в 10:46.
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2019, 04:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 471

Сообщение от Nastya251985
при изменении состояния в любом инпуте... выведет в консоль аналогичный приведённому в условии url с актуальными значениями фильтров
addEventListener("input", ({ target }) => {
	if(!target.matches("form [name]")) return;

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

	console.log(url);
});


Сообщение от Nastya251985
инпуте, кроме "распродажа"
тогда ему не нужен атрибут name

Сообщение от Nastya251985
при загрузке страницы разберёт значения фильтров из 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;
	}
}


Сообщение от Nastya251985
набросать самую элементарную разметку
вместо <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, 15.01.2019 в 05:23.
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2019, 09:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,326

Malleys,
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2019, 11:54
Новичок на форуме
Отправить личное сообщение для Nastya251985 Посмотреть профиль Найти все сообщения от Nastya251985
 
Регистрация: 11.01.2019
Сообщений: 9

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Интересная задача помогите! brons.dev Элементы интерфейса 6 04.06.2015 01:45
Задача про графы LunarionXIV Общие вопросы Javascript 0 23.12.2014 13:39
Задача c тегом <g> в svg Kosty@n Элементы интерфейса 2 14.01.2013 18:08
Задача в том, чтобы проставить галочки на журналы и газеты, выбрать количество месяце karat2707 Events/DOM/Window 5 18.04.2012 03:22
помощь новичку - задача вывода содержимого нескольких страниц в одну новую samurau AJAX и COMET 2 03.11.2009 19:07