Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Получить данные из формы и переадресовать на страницу (https://javascript.ru/forum/dom-window/78836-poluchit-dannye-iz-formy-i-pereadresovat-na-stranicu.html)

Malleys 12.11.2019 08:20

firsmember, вы задали очень хороший вопрос.

Цитата:

Сообщение от firsmember
Хочется получить введенные значения "на лету" и при нажатии на кнопку, сформировать собственно адрес по типу указанного выше и переадресовать человека на этой же странице по сформированному адресу

Форма именно так и работает, если вы не укажете у <form> атрибут action. (Т. е. произойдёт переход на эту же страницу, но с дополнительными параметрами)

Цитата:

Сообщение от firsmember
Очень важно, чтобы выбранные ранее данные после загрузки страницы снова ввелись в эту форму...

Вам нужно пройтись циклом по параметрам и вписать каждое значение в соответствующее поле. Я приведу пример ниже.

Цитата:

Сообщение от firsmember
name='age_min' id='age_min' class='age_min'

Можно указать только name, именно оно определяет имя поля в форме, которое включается в запрос. Если нужно в стилях, то элемент определяется как [name=age_min]

Цитата:

Сообщение от firsmember
<option value="150">150</option>

Можно не указывать атрибут value, если значение поля и надпись в раскрывающемся списке одинаковы. Т. е. достаточно <option>150</option>

Цитата:

Сообщение от firsmember
type='text'

Можно не указывать, так как по умолчанию используется именно текст.

Цитата:

Сообщение от firsmember
Ума не приложу, как реализовать

Вот пример с учётом всего вышенаписанного... (Можно проверить в отдельной вкладке — https://charm-launch.glitch.me/form.html)
<form method="get" id="search-form">
	<input name="age_min">
	<input name="age_max">
	<select name="height_min">
		<option>150</option>
		<option>155</option>
		<option>160</option>
		<option>165</option>
		<option>170</option>
	</select>
	<select name="height_max">
		<option>150</option>
		<option>155</option>
		<option>160</option>
		<option>165</option>
		<option>170</option>
	</select>
	<select name="lang">
		<option>RUS</option>
		<option>USA</option>
	</select>
	<select name="country_40">
		<option>RUS</option>
		<option>USA</option>
	</select>
	<input name="keyword">
	<select name="per_page">
		<option>1</option>
		<option>4</option>
		<option>8</option>
		<option>16</option>
		<option>20</option>
		<option>40</option>
	</select>
	<input type="hidden" name="um_search" value="1">
	<button>Искать</button>
</form>
<script>
	const searchForm = document.getElementById("search-form");
	for(const [key, value] of new URL(location).searchParams) {
		const control = searchForm.elements.namedItem(key);
		if(!control) continue;
		control.value = value;
	}
</script>


Цитата:

Сообщение от firsmember
Просто вы меня лечите уже часа 4 наверное если не больше в этом направлении, а помочь вам 5 минут делов

Очевидно он не знает, как это сделать, поскольку даже приблизительно не было ответа касательно вашего вопроса о заполнении формы данными, вместо этого сначала идут вещи, о которых новичкам как-раз таки нужно рассказывать, а не задавать им вопросы, а затем оскорбления.

laimas 12.11.2019 10:39

Malleys, бабушке сво
Цитата:

Сообщение от Malleys
Строка с параметрами содержит их в определённом порядке, о какой ассоциации может идти речь?

Что будем дурочку включать?


Часовой пояс GMT +3, время: 10:20.