Good day. Tell me how to make the page load parameters taken from the URL and fill out the form on this page. I don’t want to generate the necessary html at once as on Hashcode, there are several selects on the form - inconvenient. The site uses ajax navigation through location.hash. Maybe here somehow get out.

Google even an example , but I can not figure out who / what / how it fills the search form.

Poke in the right direction. At least as it happens in the example.

    2 answers 2

    Answer: parse hash and set form fields from it. In the example, this is done by the query.js script. The jQuery.query plugin is responsible for parsing the URL. Thanks to all.

      I don’t know how to format it, and today I don’t know, but I hope it will help. For convenience, I used jQuery

      <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> (function () { var AjaxSearch = function () { var $this, data, hash, DetectHash = function (func) { // функция для отслеживания изменения хеша setInterval(function () { if (hash != window.location.hash && window.location.hash) { hash = window.location.hash; // устанавливаем новый хеш func(); // вызываем функцию аякса из хеша } }, 150); }, AjaxFromHash = function () { var id, value, arg, i = 0, pairs = hash.slice(1).split('&'), // разбиваем хеш на пары length = pairs.length; for (; i < length; i++) { // перебираем все пары arg = pairs[i].split('='); // разбваем пару на id и значение $('#' + arg[0]).val(arg[1]); // меняем значения полей } $('#search_form').trigger('submit'); // запускаем отправку формы }, getData = function ($this) { // получаем данные из формы и записываем их в виде строки запроса var data = ''; $this.find('input[type="text"], select').each(function () { var $this = $(this); if (data) data += '&'; data += $this.attr('name') + '=' + $this.val(); }); return data; }, sendQuery = function (event) { // отправка данных аяксом event.preventDefault(); // отменяем поведение по умолчанию $this = $(this); data = getData($this); $.ajax({ url: $this.attr('action'), // получем из формы адрес отправки data: data, type: $this.attr('method'), // получем из формы метод success: Success // обработчик успеха }); }, Success = function (html) { // обработчик успеха $('#print').html(html); // выводим принятые данные (в нашем случае это html? если данные будут гоняться в json-e, нужно писать отдельный парсер) hash = '#' + data; // изменяем текущее значени переменной для слежки window.location.hash = data; // изменяем хеш }, Init = function () { // инициация функции $(function () { $('#search_form').bind('submit', sendQuery); // навешиваем событие для формы // hash = window.location.hash; // запоминаем текущий хеш (если не выставить то сразу произойдёт запрос с данными в хеше) DetectHash(AjaxFromHash); // отслеживаем изменение в хеше }); }; return Init; // в случае обращения к AjaxSearch запускаем функцию Init }(); AjaxSearch(); })(); </script> </head> <body> <div> <form action="1.html" method="post" id="search_form"> <input type="text" name="search" id="search" /> <select name="country" id="country"> <option value="0">Страна</option> <option value="1">Беларусь</option> <option value="2">Польша</option> </select> <select name="style" id="style"> <option value="0">Стиль</option> <option value="1">Альтернатива</option> <option value="2">Инди</option> </select> <input type="submit" value="Найти" /> </form> </div> <div id="print"> </div> </body> </html>
      • @RedMonkey, To format the code, select it with the mouse and click on the button 101010 of the editor. - Nicolas Chabanovsky ♦