|
Объединение двух 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, время: 11:31. |
|