задача тестовая
Допустим, что по 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 с актуальными значениями фильтров |
<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> |
Цитата:
addEventListener("input", ({ target }) => { if(!target.matches("form [name]")) return; const url = `${new URLSearchParams(new FormData(target.form))}`; console.log(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; } } Цитата:
весь пример целиком <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&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,
:thanks: |
Malleys,
спасибо тебе огромное! Очень просто всё описано. Только в задании в url значения должны выводиться через запятую, т.е. через метод split, либо subatring(если правильно поняла свойства). |
Часовой пояс GMT +3, время: 00:42. |