Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2019, 20:06
Интересующийся
Отправить личное сообщение для max1985 Посмотреть профиль Найти все сообщения от max1985
 
Регистрация: 03.07.2018
Сообщений: 25

Изменить урл без перезагрузки страницы при выборе input type="radio"
Здравствуйте!
Есть список радиокнопок когда я нахожусь на странице /item/promote?id=15895&from=view. Надо при нажатие на кнопку переходить на тот же урл с приставкой ?check=id (в роли id у меня value), желательно без перезагрузки страницы...
Как это можно реализовать? Спасибо!

Пока сделал так, но страница перезагружается и не делается выбор...
<input type="radio" onclick="window.location='/item/promote?id=15895&from=view?check=1'" name="svc" autocomplete="off" value="1" class="j-check">
<input type="radio" onclick="window.location='/item/promote?id=15895&from=view?check=2'" name="svc" autocomplete="off" value="2" class="j-check">
<input type="radio" onclick="window.location='/item/promote?id=15895&from=view?check=3'" name="svc" autocomplete="off" value="3" class="j-check">
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2019, 23:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<input type="radio" name="check" value="1" class="j-check">
<input type="radio" name="check" value="2" class="j-check">
<input type="radio" name="check" value="3" class="j-check">

<script>

addEventListener("change", event => {
	const url = new URL(location);
	url.searchParams.set(event.target.name, event.target.value);
	history.replaceState(null, null, url);
});

</script>
Достаточно добавить этот скрипт только один раз! Обрабатывает изменения всех полей ввода, добавьте условие, если нужно только определённые поля.
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2019, 08:05
Интересующийся
Отправить личное сообщение для max1985 Посмотреть профиль Найти все сообщения от max1985
 
Регистрация: 03.07.2018
Сообщений: 25

Сообщение от Malleys Посмотреть сообщение
[HTML run]<input type="radio" name="check" value="1" class="j-check">Достаточно добавить этот скрипт только один раз! Обрабатывает изменения всех полей ввода, добавьте условие, если нужно только определённые поля.
Спасибо! Работает!
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2023, 13:42
Новичок на форуме
Отправить личное сообщение для nenado88 Посмотреть профиль Найти все сообщения от nenado88
 
Регистрация: 30.09.2013
Сообщений: 4

Сообщение от Malleys Посмотреть сообщение
<input type="radio" name="check" value="1" class="j-check">
<input type="radio" name="check" value="2" class="j-check">
<input type="radio" name="check" value="3" class="j-check">

<script>

addEventListener("change", event => {
	const url = new URL(location);
	url.searchParams.set(event.target.name, event.target.value);
	history.replaceState(null, null, url);
});

</script>
Достаточно добавить этот скрипт только один раз! Обрабатывает изменения всех полей ввода, добавьте условие, если нужно только определённые поля.


Крутое решение!
Подскажите пожалуйста, а если в url уже стоит параметр "?" но скрыт через htacsess, как быть?

Например:

site.ru/catalog/iphone (на самом деле выглядит так: site.ru/catalog.php?url=iphone)

И когда я выполняю ваш скрипт, получается так:

site.ru/catalog/iphone?check=3 (на самом деле выглядит так: site.ru/catalog.php?url=iphone?check=3)

Надо что бы второй "?" заменялся на "&"
Как это можно реализовать?
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2023, 13:42
Новичок на форуме
Отправить личное сообщение для nenado88 Посмотреть профиль Найти все сообщения от nenado88
 
Регистрация: 30.09.2013
Сообщений: 4

Не могу понять
Сообщение от Malleys Посмотреть сообщение
<input type="radio" name="check" value="1" class="j-check">
<input type="radio" name="check" value="2" class="j-check">
<input type="radio" name="check" value="3" class="j-check">

<script>

addEventListener("change", event => {
	const url = new URL(location);
	url.searchParams.set(event.target.name, event.target.value);
	history.replaceState(null, null, url);
});

</script>
Достаточно добавить этот скрипт только один раз! Обрабатывает изменения всех полей ввода, добавьте условие, если нужно только определённые поля.


Крутое решение!
Подскажите пожалуйста, а если в url уже стоит параметр "?" но скрыт через htacsess, как быть?

Например:

site.ru/catalog/iphone (на самом деле выглядит так: site.ru/catalog.php?url=iphone)

И когда я выполняю ваш скрипт, получается так:

site.ru/catalog/iphone?check=3 (на самом деле выглядит так: site.ru/catalog.php?url=iphone?check=3)

Надо что бы второй "?" заменялся на "&"
Как это можно реализовать?
Ответить с цитированием
  #6 (permalink)  
Старый 06.05.2023, 11:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nenado88,
как вариант заменить location на
https://site.ru/catalog.php?url=iphone
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
location.search иXMLHttpRequest без перезагрузки страницы (AJAX) Ruskat AJAX и COMET 2 14.06.2016 22:35
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53
Подгрузка информера без перезагрузки страницы splean Общие вопросы Javascript 6 13.03.2009 15:31
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06