|
|
| 11行目: |
11行目: |
| <span class="slider"></span> | | <span class="slider"></span> |
| </label> | | </label> |
| | <div class="clear-btn">クリア</div> |
| <input type="submit" value="検索" class="search-btn" /> | | <input type="submit" value="検索" class="search-btn" /> |
| </div> | | </div> |
| 129行目: |
130行目: |
|
| |
|
| <style> | | <style> |
| | .clear-btn { |
| | padding: 8px 16px; |
| | background: #ccc; |
| | border-radius: 6px; |
| | cursor: pointer; |
| | user-select: none; |
| | margin-left: 10px; |
| | font-size: 14px; |
| | } |
| | |
| | .clear-btn:active { |
| | opacity: 0.7; |
| | } |
| | |
| .search-btn { | | .search-btn { |
| margin-left: auto; | | margin-left: auto; |
| 297行目: |
312行目: |
| } | | } |
| </style> | | </style> |
| <script>
| |
| document.getElementById('searchForm').addEventListener('submit', function (e) {
| |
| const searchText = document.getElementById('searchText');
| |
| const genre = document.getElementById('genre');
| |
| const station = document.getElementById('station');
| |
| const budget_min = document.getElementById('budget_min');
| |
| const budget_max = document.getElementById('budget_max');
| |
|
| |
| if (searchText.value === '') {
| |
| searchText.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (genre.value === '') {
| |
| genre.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (station.value === '') {
| |
| station.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_min.value === '') {
| |
| budget_min.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_max.value === '') {
| |
| budget_max.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| });
| |
|
| |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const params = new URLSearchParams(window.location.search);
| |
|
| |
| params.forEach((value, key) => {
| |
| // input, select, checkbox, radio 全対応
| |
| const el = document.querySelector(`[name="${key}"]`);
| |
| if (!el) return;
| |
|
| |
| // checkbox / radio (name[] の対応含む)
| |
| if (el.type === "checkbox" || el.type === "radio") {
| |
| document.querySelectorAll(`[name="${key}"]`).forEach(input => {
| |
| if (input.value === value) {
| |
| input.checked = true;
| |
| }
| |
| });
| |
| } else {
| |
| // text / select など
| |
| el.value = value;
| |
| }
| |
| });
| |
| });
| |
|
| |
| //# sourceURL=foobar.js
| |
| </script>
| |
| </html> | | </html> |
|
| |
|
