Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Объединение двух form (https://javascript.ru/forum/misc/71412-obedinenie-dvukh-form.html)

ivan899 16.11.2017 22:44

Объединение двух 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>

laimas 17.11.2017 02:32

Форма одна, желаний два.

search, это есть Блог, а search-shop, это есть товары, так?
Если да, так почему это не значения опций списка?

ivan899 17.11.2017 12:33

Нужна просто форма поиска в которую вписал текст нажал где именно искать и нажал кнопку искать, всё!

Первый скрипт и так работает он заменяет action, а вот второй который name, не работает. Точнее не правильно работает, не так как надо.

laimas 17.11.2017 13:01

А проще никак нельзя, без выкрутасов? :)

<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>

ivan899 17.11.2017 13:27

Нет нельзя. Просто товары не ищет без <input name="search"
Кстати ваш пример вообще перестал искать товары, выбираю товары, в action передается ссылка /search-shop, а вот текст не передается вообще.
Только в блоге ищет.

ivan899 17.11.2017 13:46

Вот почти оригинальный код двух форм..
Лишние 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

ivan899 17.11.2017 13:51

Но главное в форме не это...
А вот эти строки:
<input name="searchword" type="search" placeholder="Поиск..." /> 
<input type="text" name="search" value="" />

Ну и конечно же action.

laimas 17.11.2017 14:02

Цитата:

Сообщение от ivan899
Просто товары не ищет без <input name="search"

А что я привел код вашей формы без этого поля?

А теперь по существу.

1) Вообще-то формы поиска отправляют методом GET, дабы робот был в курсе. Ну это не важно.

2) В вашей форме не понять что - вы либо выбирайте адрес поиска списком и имейте одну кнопку отправления формы, либо выбрасывайте список и имейте две кнопки отправления. Зачем дублирование?

3) Искать при наличие требуемых параметров запроса или не искать в случае их отсутствия, это решается только сервером. Другими словами, если вы в форме определите все требуемые параметры запрос (поля и их значения), то сервер будет таки искать. Код, что я привел, всего лишь выбирает адрес поиска, то есть запрашиваемый серверный сценарий. Не думаю, что в этих обеих сценариях есть проверка "лишних" ключей, просто будет учитываться наличие необходимых.

ivan899 17.11.2017 15:12

Мне нужно просто форма поиска)
Не знаю как объяснить. Есть 2 формы, нужна одна. Как работает поиск...
Вписал, выбрал где искать нажал кнопку отправить и просто вывелись результаты поиска, никаких доп.параметром и расширенного поиска на обычной форме нет, простое поле input, select с выбором и кнопкой отправить. При выборе из select нужно что бы изменялись значения action и name в input. Вот и всё))
Я выше привел код двух форм.

ivan899 17.11.2017 15:14

Проблема именно в name="searchword" и name="search" в разных формах.
Вот их нужно изменить в зависимости от выбора select


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