Объединение двух 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 |
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Нашел такой пример, но как теперь соединить их?
<input type='text' id='rez' />
<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').name=value+''">
<option value="" ></option>
<option value="search" >60</option>
<option value="searchword" >90</option>
</select>
|
ivan899, немного изменил код laimas:
<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);
frm.find('input[type="text"]').attr('name',$(this).data('name'));
})
});
</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" data-name="search">Блог</option>
<option value="/search-shop" data-name="searchword">Товары</option>
</select>
<input type="submit" value="Найти" />
</form>
</body>
</html>
|
Цитата:
|
ivan899,
если вам и имя ключа запроса надо еще изменять, то это уже ананизм, другого не скажешь, лучше на севере сделать нормальный скрипт, а не плодить кучи переменных. И вообще, можно вообще определить адресом запроса один адрес, не менять его у формы, все равно ваш запрос на поиск, это POST. При этом список под именем передает параметр, который и укажет северу где искать. А там уже можно и одним скриптом производить поиск (собственно это разные таблицы БД и вывод), либо подключать нужный сценарий. |
Цитата:
|
laimas_vaikules,
батенька, вам пора доктора посетить. |
laimas,
Ну зачем же Вы ведете себя как ребенок? Вы еще доживите до моего возраста. В школе учащимся, учитель биологии или химии тоже кажется ненормальным... Потом вырастают и жалеют о своем отношении и поступках к старшим. Я лишь указываю на Ваш неполноценный подход к решению проблем. Уже на вторую страницу размусолили, как Вы же выразились - "ананизм". А проблема решается, ответом, если не в один пост, то в два точно. |
Цитата:
И не надо считать себя дедушкой в среде сопливых подростков, ники на форуме не говорят о возрасте. И поменьше "рисованной" интеллигенции, сдается мне, что за ней скрывается босяк. И последнее мое слово, лично вам, умный вы наш - лучше пусть дураки считают, что лев испугался шакала, чем умные скажут, что лев связался с шакалом. |
Цитата:
|
ivan899,
вам чего надо? Вам недоступны скрипты сервера или запрос к чужому домену? Такое впечатление, что под имеющееся у себя на сервере вы хотите "подогнать под ответ" клиентское решение. Ну если опрашиваемый домен ваш, разве не разумней сделать логично, чтобы и на сервер был минимум, и на клиенте тоже? |
Цитата:
Цитата:
Если Вы не заметили, то я выражаюсь в такой же манере как и Вы. Покозываю Вашу манеру общения. Стало быть "рисованность". Цитата:
Не рекомендую сравнивать себя с животными, Вы же человек. Проблеме надо смотреть в лицо, а не прятаться в норку. Давайте проанализируем второй и третий абзац. Во втором Вы хотите сказать, что надо быть проще. В третьем пытаетесь возвысить себя на другими. Явно, себя Вы шакалом не считаете... Одно суждение противоречит другому. Ложное умозаключение. Ярко выраженный софизм - нарушения логических законов для внешне правильного доказательства ложных мыслей. |
laimas_vaikules,
ты явно ошибся форумом, тебе нужно в соцсети. А я не намерен с каждым придурком вести пустые "высокоинтеллектуальные" дебаты. Заняться мне больше нечем, кроме как любоваться твоим красноречием - иди нахрен придурок. Это не красноречие, но то что нужно для таких как ты, а дальше хоть на сопли изойди. Если ты думаешь, что можешь ужалить меня, то ошибся, сильно ошибся. |
Цитата:
Я человек волевой, оставлю последнее слово за Вами... Но, пожалуйста, признайте это! Эту Вашу надменную подачу и измените ее к участникам форума на более мягкую. |
Ребят, давайте относиться друг к другу чуточку добрее. Напоминаю, что у этого форума есть правила. Нарушение правил грозит не очень хорошими последствиями.
laimas, Вам предупреждение, оскорблять никого не нужно. ;) |
ruslan_mart,
я не хам, но когда кто-то спецом нарывается, а это так, эта личность на форуме не спроста появилась, я терпеть не буду. Ну закроют доступ к форуму, печально, но горе философов и нравоучителей считающих себя безгрешными терпеть не стану. Если бы сей философ по теме, тогда да. Но то что я кричу на всех "Дурак, так не делай", это уже слишком. Проследите все его посты - и кто кого нравоучает? Путнего что либо этой персоной на форуме сказано? Я ему сказал что и следовало сказать, а далее он для меня он просто пустое место, внимание на его пустословие я уже не обращаю. PS. Собственно он своим красноречием засрал данную тему форума. |
чет тип такого должно быть, пробуй, главное правильные пути пропиши к папкам обработчика в getData()
<input id="srch"><button onclick="superSearch()">Искать</button>
<div id="one"></div>
<div id="two"></div>
<script>
function getData(url, id, method = "GET", data = null){
let request = new XMLHttpRequest();
request.open(method, url);
if (method == 'POST'){
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
request.send(data);
request.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
document.getElementById(id).innerHTML = this.responseText;
} else {
console.log(this.statusText, ' ', this.status);
}
}
}
function superSearch(){
var searchWord = document.getElementById("srch").value;
getData("/search/", "one", "POST", "searchword=" + searchWord);
getData("/search-shop/", "two", "POST", "search=" + searchWord);
}
</script>
--- И да, возможно нужно добавить поля hidden |
Спасибо конечно. Но я если честно не понял что это вообще))
Я знаю html, знаю css, php потихоньку изучаю. Но в js пока мало понимаю. Отправлять почти всю форму скриптом это странно как то)) Речь была о стандартном компоненте поиска joomla и объединение его с поиском магазина joomshopping с помощью обычной формы с минимум скриптов. Есть плагин для объединения результатов, но он выводит просто текст без изображения товара и цены. Вот и хотелось объединить не лазя в код самого компонента. Это ведь по сути обычная форма с минимум js. Мне нужно было лишь заменить 2 участка формы, это action и name. Я пока сам попытаюсь разобраться, так как опыта и знаний в js маловато, то пытаюсь по ходу разбираться. |
Эй там выше...
Хватит вам ругаться. Живите дружно. И будет вам счастье. Спасибо. |
просто так в хтмл две формы за один раз не отправишь, это тоже, что войти за один раз в две разные двери.
|
Lion777,
Нет, это я понимаю что не отправить 2 формы за один раз. Но я вроде и не хотел отправлять. Я просто хотел заменить в форме значения, а уже после отправить одну форму. Просто я думаю посетителям было бы удобнее использовать одну форму чем две. Частично те скрипты что я выше сам нашел и использовал работали и заменяли. Где еще были 2 кнопки... Конечно код этот не самый лучший и может там ошибки даже есть, никто ведь не говорит правильно ли... Но он заменял action. Я просто хотел изменять значения в зависимости от выбора select, вот и всё. И думаю тут можно обычным скриптом обойтись. без костылей и дополнительных модулей в самой cms. Так как большинство того что я исправлю после обновления слетит и это нельзя переопределить в шаблон cms. |
Почему я про две двери написал, потому что обработчики в разных категориях, папках, адресах у тебя. Атрибут action не для красоты, один ссылается на search, а второй на search-shop из разных категорий данные тянутся, сделай на сервере в одном файле и нет проблем.
--- Объясню популярней, колбаса в правой комнате, сыр в левой, а ты хочешь зайти за колбасой и там же взять сыр, но его там нету, он в другой комнате, ну или холодильнике, короче, по другому адресу. |
Lion777,
нее, обработчик это я указал так в меню. Просто на один адрес нельзя назначить 2 пункта меню. Ну а так да, в разных папках это всё лежит. У одой формы идет: /component/search/?search=текст У второй: /component/jshopping/search/result вообще без какого либо текста, то есть в url вводимый текст в поле не передается. Как по мне, проще заменить action путем несложной замены из select чем писать для этого дополнительный модуль. |
А чем плоха такая замена через select? Вроде меньше кода получается? И работает не хуже.
|
Lion777,
Вы думаете я хочу получить результат с двух форм сразу? я не пытаюсь взять и колбасу и сыр сразу. Я просто пытаюсь посетителю дать выбор, искать или там или там. Это было бы тоже самое что перед вами две двери в первую комнату и вторую, вам просто нужно выбрать куда идти. Вот и все. Если на страницы две формы с разными обработчиками это неудобно. А когда есть одна форма но с выбором куда идти, это удобнее. Просто ссылка на обработчик меняются в зависимости от выбора select. |
Я знаю что может так не правильно использовать, но это вроде работает.
Вот код который я сделал с заменой action и заменой name в input. Посмотрите как он работает через инспектор(если у вас firefox). Может подскажете как более правильно его написать.
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#inselect').change(function(){
$('.in').hide();
$('#' + $(this).val()).show();
});
});
</script>
<form action="" method="post">
<input id="rez" name="" type="text" placeholder="Поиск..." />
<Select id="inselect" onchange="document.getElementById('rez').name=value+''">
<option value="in2" disabled="" selected>Где искать?</option>
<option value="searchword">Блог</option>
<option value="search">Товары</option>
</Select>
<div id="in2" class="in" style="display:block">
<button>Найти</button>
</div>
<div id="searchword" class="in" style="display:none">
<input type="submit" value="Найти" onclick="this.form.action = '#1';" />
</div>
<div id="search" class="in" style="display:none">
<input type="submit" value="Найти" onclick="this.form.action = '#2';" />
</div>
<input name="setsearchdata" value="1" type="hidden">
</form>
|
Это что то на подобии поиска, может видели в интернете на сайтах? Искать где: На сайте, в интернете(google, yandex).
Вот это примерно тоже самое. Только ищет оно на сайте в двух разных компонентах, не всё вместе, а только либо там, либо там. |
Цитата:
С этого надо было начинать тему, а не о двух формах. Если вы подмените action формы на эти адреса, то работать не будет по причине того, что разные методы запроса ожидает сценарий (если /component/jshopping/search/result это поиск). То есть наряду со сменой адреса, имени поля запроса, нужно еще менять и метод передачи формы. Вам Nexus показывал код который меняет и имя поля, добавьте в него еще и смену метода запроса и будет работать. А кнопки submit в скрытые элементы не прячьте, нужна всего одна и без обработчика. |
laimas,
Ну во первых и та и другая форма отправляет запрос методом post. Во вторых, я бы не спрашивал как заменить если бы это не работало. Я меняю action в форме и у меня ищет в блоге, меняю на другой и у меня так же нормально ищет в товарах. Мне не нужна смена метода запроса... Форма работает что я выше скинул код, только она с 3 кнопками, хотелось бы компактнее как то, но не знаю как это сделать. То что Nexus скинул код, он почему то не работает, там name не меняется, а вот action меняется |
| Часовой пояс GMT +3, время: 18:49. |