|
Объединение двух form
Здравствуйте. Помогите пожалуйста. Имеется две формы поиска. Нужно объединить их в одну. Не знаю как правильно это сделать, так как не силен в js. Нужно сделать одну форму, один input с двумя значениями name, и что бы в форме менялось action, тоже 2 значения.
Частично форма работает, но с хаком в самом компоненте cms, но после обновления всё слетит. Хотелось бы нормально сделать. В одном input поиск идёт по значению name="serach", в другой name="searchword". Вот набросал пример что уже есть. https://jsfiddle.net/897obLqq/4/embedded/ Правильно или нет не знаю. Правда второй скрипт замены name не работает почему то в jsfiddle, на компьютере работало. Вот как у меня сделано: <script src="jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#inselect').change(function(){ $('.in').hide(); $('#' + $(this).val()).show(); }); }); </script> <script type="text/javascript"> window.onload = function(){ var select = document.forms['select'].elements, i = select.length, array = []; while(i--){ select[i].onchange = function(){ array.push(this[this.selectedIndex].text); select[0].name = array; }; } }; </script> <form action="/search" method="post" name="select"> <input name="search" type="text" placeholder="Поиск..." /> <Select id="inselect"> <option value="" disabled="">Где искать?</option> <option value="in1" selected>Блог</option> <option value="in2">Товары</option> </Select> <div id="in1" class="in" style="display:block"> <input type="submit" value="Найти" onclick="this.form.action = 'http://test.loc/search';" /> </div> <div id="in2" class="in" style="display:none"> <input type="submit" value="Найти" onclick="this.form.action = 'http://test.loc/search-shop';" /> </div> </form> |
Форма одна, желаний два.
search, это есть Блог, а search-shop, это есть товары, так? Если да, так почему это не значения опций списка? |
Нужна просто форма поиска в которую вписал текст нажал где именно искать и нажал кнопку искать, всё!
Первый скрипт и так работает он заменяет action, а вот второй который name, не работает. Точнее не правильно работает, не так как надо. |
А проще никак нельзя, без выкрутасов? :)
<html> <head> <meta charset="utf-8"> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function() { var frm = $('form').submit(function() { if(!dst.val()) { alert('Выберите где искать'); return false; } }), dst = $('#inselect').change(function() { frm.attr('action', this.value) }) }); </script> </head> <body> <form action="" method="post" name="select"> <input name="search" type="text" placeholder="Поиск..." /> <select id="inselect"> <option value="" disabled="" selected>Где искать?</option> <option value="/search">Блог</option> <option value="/search-shop">Товары</option> </select> <input type="submit" value="Найти" /> </form> </body> </html> |
Нет нельзя. Просто товары не ищет без <input name="search"
Кстати ваш пример вообще перестал искать товары, выбираю товары, в action передается ссылка /search-shop, а вот текст не передается вообще. Только в блоге ищет. |
Вот почти оригинальный код двух форм..
Лишние id и class удалил. Просто так нагляднее будет видно что я хочу объединить. Другого нормального варианта нет. Хотя можно объединить поиск, плагин есть и использовать одну форму в место двух, но поиск будет не очень красивым. Нужно будет замарачиватся с самим компонентом. <form method = "post" action="/search-shop"> <input type="hidden" name="setsearchdata" value="1"> <input type = "hidden" name = "category_id" value = "0" /> <input type = "hidden" name = "search_type" value = "any" /> <input type = "text" class = "inputbox" style = "width: 110px" name = "search" value = "" /> <input type = "submit" value = "Найти" /> </form> <form action="/search" method="post" class="form-inline"> <input name="searchword" type="search" placeholder="Поиск..." /> <button class="button btn btn-primary" onclick="this.form.searchword.focus();">Найти</button> <input type="hidden" name="task" value="search" /> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="104" /> </form> Вот пример как ищет поиск, слева вверху товары, справа обычный поиск по материалам, а внизу это если объединить плагином. Там нет ни цены, ничего другого нет. Проще объединить форму и пусть посетитель сам решает где искать. http://i12.pixs.ru/storage/4/1/8/3pn...5_28342418.png |
Но главное в форме не это...
А вот эти строки: <input name="searchword" type="search" placeholder="Поиск..." /> <input type="text" name="search" value="" /> Ну и конечно же action. |
Цитата:
А теперь по существу. 1) Вообще-то формы поиска отправляют методом GET, дабы робот был в курсе. Ну это не важно. 2) В вашей форме не понять что - вы либо выбирайте адрес поиска списком и имейте одну кнопку отправления формы, либо выбрасывайте список и имейте две кнопки отправления. Зачем дублирование? 3) Искать при наличие требуемых параметров запроса или не искать в случае их отсутствия, это решается только сервером. Другими словами, если вы в форме определите все требуемые параметры запрос (поля и их значения), то сервер будет таки искать. Код, что я привел, всего лишь выбирает адрес поиска, то есть запрашиваемый серверный сценарий. Не думаю, что в этих обеих сценариях есть проверка "лишних" ключей, просто будет учитываться наличие необходимых. |
Мне нужно просто форма поиска)
Не знаю как объяснить. Есть 2 формы, нужна одна. Как работает поиск... Вписал, выбрал где искать нажал кнопку отправить и просто вывелись результаты поиска, никаких доп.параметром и расширенного поиска на обычной форме нет, простое поле input, select с выбором и кнопкой отправить. При выборе из select нужно что бы изменялись значения action и name в input. Вот и всё)) Я выше привел код двух форм. |
Проблема именно в name="searchword" и name="search" в разных формах.
Вот их нужно изменить в зависимости от выбора select |
Часовой пояс GMT +3, время: 08:20. |
|