Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Заполнение формы с методом GET (https://javascript.ru/forum/misc/64015-zapolnenie-formy-s-metodom-get.html)

Vor_tex 14.07.2016 15:28

Заполнение формы с методом GET
 
Добрый день!
По прежнему изучаю в качестве хобби JS, возник вопрос возможно ли заполнить форму через ссылку?
Возможно я не совсем корректно задаю вопрос, поэтому постараюсь просто показать на примере чего хотелось бы добиться.
Набросал вот свой простенький шаблончик, умноежение двух переменных с последующим выводом в другой инпут..
Вбиваю в инпуты 2 и 2 нажимаю "ок", получаю 4.
Далее нажимаю сброс я вижу ссылку с Get запросом (другого способа получить эту ссыль я не нашел), на сколько я понимаю, (такого вида learn.html?a=2&b=2&c=4)...
хочу чтобы я введя в адресную строку в ручную learn.html?a=4&b=4&c=16) в инпуты с соответствующими значениями...
Возможно ли это или, то что запланировал бред?

Делаю это в целях чтобы в дальейшем поделиться ссылкой с человеком, перейдя по которой он бы увидел проведенные ранее расчеты...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta charset="utf-8">
<script>
function calc() {
	var a = +(document.getElementById('a').value);
	var b = +(document.getElementById('b').value);
	var c = a * b;
	//alert (c);
	document.getElementById('c').value = c;
}
</script>
 <body>
  <form method="get">
		<input name="a" id="a" type="text" value="" /> 
		* 
		<input name="b" id="b" type="text" value="" /> 
		= 
		<input name="c" id="c" type="text" value=""/>
		<br /> 
		<input name="btn" type="Button"	value="OK" onclick="calc();"/>
		<button class="btnres" onclick="javascript:location.reload()">Сброс</button>
</form>
</body>
</html>

Vlasenko Fedor 14.07.2016 16:02

var vars = {};
location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
});
console.log(vars);
console.log(vars['a']);
console.log(vars['b']);
console.log(vars['c']);

в объекте vars у вас будут лежать get параметры

Vor_tex 14.07.2016 21:23

А как мне сделать так чтобы в адресной строке начали отображаться get параметры, ибо пока я к примеру не нажму у себя onclick="javascript:location.reload()" в адресной строке голый URL, т.е. без параметров?

Vlasenko Fedor 14.07.2016 22:12

Цитата:

Сообщение от Vor_tex
чтобы в адресной строке начали отображаться get параметры

работать с history
history.pushState({}, '', '?a=2&b=3');

warren buffet 15.07.2016 21:36

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

armidoll 15.07.2016 23:56

Vor_tex,
немного теории и примеров ( возможно поможет чем-то )
Майкл С. Миковски "Разработка одностраничных вэб-приложений"
3.6. Управление состоянием приложения - стр.124

Vor_tex 18.07.2016 10:22

В общем то я пытаю свои силы в этом http://skies-calc.ru - это импровизированный калькулятор талантов для одной игры (я сам понимаю что реализация не очень смотря с вашего уровня), но суть задачи моей в том я хотел бы получить ссылку которой я мог бы поделиться с другим человеком показав ему как распределены таланты у меня...
ссыль такого типа http://skies-calc.ru/?lvl=25&exp=9+9...amouflage= 10

armidoll 18.07.2016 17:08

Мне тут разъясняли некоторые аспекты близкого по тематике вопроса, может что полезно будет.

Vor_tex 19.07.2016 09:05

т.е. теоретически мне нужно будет написать обработчик той строки УРЛ правильно? тобишь после обработки я получу массив данных с которыми смогу работать...
тогда подскажите как мне по нажатию кнопки получить ссылку такого типа http://skies-calc.ru/?lvl=25&exp=9+9...amouflage= 10 ?
ведь она в реальном времени при нажатии кнопок нынешнего интерфейса не изменяется...

warren buffet 19.07.2016 15:38

Вся эта тряхомудия приходит с сервера и на клиенте не обрабатывается и не меняется апще. На php есть функции работы с search string - так эта шняга называется. На js можно найти готовые решения. Эти параметры нужны если надо на сервер передавать что-то и там сохранять, а если не надо - то пиши в куки и сервер все прочитает потом.


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