formularz wyszukiwania z ograniczeniem

[Gumofon]

Posiadam na stronie formularz wyszukiwania złożony z 12 pól select. Niestety gdy użytkownik określi wszystkie możliwe 12 pól zapytanie do bazy wykonuje się zbyt długo, skrypt obsługujący wyszukiwanie się wiesza. Chcę wprowadzić ograniczenie, że użytkownik może zaznaczyć maksymalnie 8 pól z dostępnych 12. Jakąś blokadę, że jak zaznaczy już 8 pól, to żeby nie mógł zaznaczyć więcej.

Wiem, wiem, można zbudować formularz z 8 polami select. Ale chcę aby użytkownik mógł sam wybrać które 8 z dostęnych 12 zaznaczy.

Czy ktoś ma pomysł jak to zrobić? Prosił bym o gotowy kod, bo nie znam php, ale podane fragmenty kodu będę umiał wkleić gdzie trzeba

[slawek22]

Nie dostaniesz gotowca, nie da się tak "wkleić kodu" (do nie wiadomo czego).

Lepiej sobie zrób jakieś tabele pomocnicze (tzn. zleć)

[Gumofon]

Formularz jest używany w wordpressie. A kod jest taki:

<form method='get' class='custom_search widget custom_search_custom_fields__search' action='https://kwiaty-ogrody.pl'>
<input type='hidden' name='search-class' value='DB_CustomSearch_Widget-db_customsearch_widget'/><input type='hidden' name='widget_number' value='preset-default'/>				<div class='searchform-params'>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Pora kwitnienia</label><span class='searchform-input-wrapper'><select name='cs-Pora_Kwitnienia-0'><option value='' selected='true'>Dowolne</option><option value='brak'>brak</option><option value='kwitnie jesienią'>kwitnie jesienią</option><option value='kwitnie latem'>kwitnie latem</option><option value='kwitnie wiosną'>kwitnie wiosną</option><option value='kwitnie zimą'>kwitnie zimą</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Barwa kwiatów</label><span class='searchform-input-wrapper'><select name='cs-Barwa_Kwiatów-1'><option value='' selected='true'>Dowolne</option><option value='białe (beżowe, kremowe)'>białe (beżowe, kremowe)</option><option value='czerwone'>czerwone</option><option value='fioletowe'>fioletowe</option><option value='niebieskie'>niebieskie</option><option value='pomarańczowe'>pomarańczowe</option><option value='purpurowe'>purpurowe</option><option value='różowe'>różowe</option><option value='zielone'>zielone</option><option value='żółte'>żółte</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Barwa liści/igieł</label><span class='searchform-input-wrapper'><select name='cs-Barwa_Liści/Igieł-2'><option value='' selected='true'>Dowolne</option><option value='czerwone'>czerwone</option><option value='niebieskie'>niebieskie</option><option value='szare, srebrzyste'>szare, srebrzyste</option><option value='wielobarwne'>wielobarwne</option><option value='zielone'>zielone</option><option value='żółte, złociste'>żółte, złociste</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Osiągana wysokość</label><span class='searchform-input-wrapper'><select name='cs-Osiągana_wysokość-3'><option value='' selected='true'>Dowolne</option><option value='0,5 do 1m'>0,5 do 1m</option><option value='1 do 5m'>1 do 5m</option><option value='do 0,5m'>do 0,5m</option><option value='pow. 5m'>pow. 5m</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Stanowisko</label><span class='searchform-input-wrapper'><select name='cs-Stanowisko-4'><option value='' selected='true'>Dowolne</option><option value='cieniste'>cieniste</option><option value='półcieniste'>półcieniste</option><option value='słoneczne'>słoneczne</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Wilgotność</label><span class='searchform-input-wrapper'><select name='cs-Wilgotność-5'><option value='' selected='true'>Dowolne</option><option value='gleby mokre'>gleby mokre</option><option value='gleby suche'>gleby suche</option><option value='gleby wilgotne'>gleby wilgotne</option><option value='gleby średnio wilgotne'>gleby średnio wilgotne</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>pH gleby</label><span class='searchform-input-wrapper'><select name='cs-pH_gleby-6'><option value='' selected='true'>Dowolne</option><option value='gleby kwaśne'>gleby kwaśne</option><option value='gleby obojętne'>gleby obojętne</option><option value='gleby zasadowe'>gleby zasadowe</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Rodzaj gleby</label><span class='searchform-input-wrapper'><select name='cs-Rodzaj_gleby-7'><option value='' selected='true'>Dowolne</option><option value='ciężkie, gliniaste'>ciężkie, gliniaste</option><option value='lekkie, piaszczyste'>lekkie, piaszczyste</option><option value='piaszczysto-gliniaste'>piaszczysto-gliniaste</option><option value='ubogie'>ubogie</option><option value='żyzne'>żyzne</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Mrozoodporność</label><span class='searchform-input-wrapper'><select name='cs-Mrozoodporność-8'><option value='' selected='true'>Dowolne</option><option value='brak mrozoodporności'>brak mrozoodporności</option><option value='mała mrozoodporność'>mała mrozoodporność</option><option value='w pełni mrozoodporna'>w pełni mrozoodporna</option><option value='średnio mrozoodporna'>średnio mrozoodporna</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Zastosowanie</label><span class='searchform-input-wrapper'><select name='cs-Zastosowanie-9'><option value='' selected='true'>Dowolne</option><option value='balkony i tarasy'>balkony i tarasy</option><option value='całoroczne (zimozielone)'>całoroczne (zimozielone)</option><option value='do suchych bukietów'>do suchych bukietów</option><option value='mieszkania'>mieszkania</option><option value='na cmentarze'>na cmentarze</option><option value='na kwiat cięty'>na kwiat cięty</option><option value='oczka wodne'>oczka wodne</option><option value='ogrody japońskie'>ogrody japońskie</option><option value='ogrody skalne'>ogrody skalne</option><option value='okrywowa'>okrywowa</option><option value='pnącze'>pnącze</option><option value='rabaty mieszane'>rabaty mieszane</option><option value='soliter'>soliter</option><option value='szklarnie, ogrody zimowe'>szklarnie, ogrody zimowe</option><option value='wrzosowiska'>wrzosowiska</option><option value='żywopłoty'>żywopłoty</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Podstawowe walory</label><span class='searchform-input-wrapper'><select name='cs-Podstawowe_walory-10'><option value='' selected='true'>Dowolne</option><option value='atrakcyjny pokrój'>atrakcyjny pokrój</option><option value='jadalne owoce'>jadalne owoce</option><option value='miododajne'>miododajne</option><option value='natleniająca'>natleniająca</option><option value='oczyszczająca wodę'>oczyszczająca wodę</option><option value='ozdobne kwiaty'>ozdobne kwiaty</option><option value='ozdobne liście/igły'>ozdobne liście/igły</option><option value='ozdobne owoce'>ozdobne owoce</option><option value='ozdobne szyszki'>ozdobne szyszki</option><option value='ozdobne w zimie'>ozdobne w zimie</option><option value='zapach'>zapach</option></select></span></div></div>
<div class='DropDownField'><div class='searchform-param'><label class='searchform-label'>Kategoria/typ rośliny</label><span class='searchform-input-wrapper'><select name='cs-all-11'><option value='' selected='true'>Dowolne</option><option value='Bez kategorii'>Bez kategorii</option><option value='Byliny'>Byliny</option><option value='Drzewa i krzewy liściaste'>Drzewa i krzewy liściaste</option><option value='Drzewa owocowe'>Drzewa owocowe</option><option value='Funkie, hosty'>Funkie, hosty</option><option value='Iglaki'>Iglaki</option><option value='Kaktusy, sukulenty'>Kaktusy, sukulenty</option><option value='Krzewy owocowe'>Krzewy owocowe</option><option value='Lilie'>Lilie</option><option value='Liliowce'>Liliowce</option><option value='Palmy'>Palmy</option><option value='Paprocie ogrodowe'>Paprocie ogrodowe</option><option value='Pnącza'>Pnącza</option><option value='Przybrzeżne'>Przybrzeżne</option><option value='Pływające'>Pływające</option><option value='Rośliny cebulowe'>Rośliny cebulowe</option><option value='Rośliny doniczkowe'>Rośliny doniczkowe</option><option value='Rośliny dwuletnie'>Rośliny dwuletnie</option><option value='Rośliny jednoroczne'>Rośliny jednoroczne</option><option value='Rośliny sadownicze'>Rośliny sadownicze</option><option value='Rośliny wodne'>Rośliny wodne</option><option value='Róże'>Róże</option><option value='Sezonowe'>Sezonowe</option><option value='Storczyki'>Storczyki</option><option value='Trawy'>Trawy</option><option value='Warzywa'>Warzywa</option><option value='Warzywa cebulowe'>Warzywa cebulowe</option><option value='Warzywa dyniowate'>Warzywa dyniowate</option><option value='Warzywa kapustne'>Warzywa kapustne</option><option value='Warzywa korzeniowe'>Warzywa korzeniowe</option><option value='Warzywa liściowe'>Warzywa liściowe</option><option value='Warzywa psiankowate'>Warzywa psiankowate</option><option value='Warzywa rzepowate'>Warzywa rzepowate</option><option value='Warzywa strączkowe'>Warzywa strączkowe</option><option value='Wody głębokiej'>Wody głębokiej</option><option value='Wrzosowate'>Wrzosowate</option><option value='Zimozielone'>Zimozielone</option><option value='Zioła'>Zioła</option></select></span></div></div>
</div>
<div class='searchform-controls'>
<br>
<input type='submit' name='search' value='Szukaj'/>
<br><br>
</div>
<div class='searchform-spoiler'></div>
</form>

[papieros]

Piękny wkleiłeś kod, brawo! Może byś się postarał i opisał jakoś dokładnie o co chodzi, jeśli chcesz żeby ktoś Ci pomógł albo przedstawił ten kod schematycznie. Czemu ktoś ma się męczyć jeśli tobie się nie chce.

[slawek22]

Dało by się to ograniczyć, poczytaj o mootools / jquery, niestety dla osoby która nie ma doświadczenia raczej to proste nie będzie. Ew php/die.

Właściwie to ciekawe bo wydaje mi się, że baza nie za duża a nawet przy wyszukiwaniu w 100k pozycji dla 15 pól jest to dość szybkie nawet jeśli porównania są skomplikowane (np. obliczanie odległości) - <5/10 sek

[giker]

Ja bym to załatwił jQuery.

Po zmianie każdego selecta zliczaj je, i kiedy będziesz miał 8 to blokujesz pozostałe.

EDIT - tak na szybko:

<script type="text/javascript">
$(document).ready(function() {
var ile = 0;
$("select").change(function (){
	if (!$(this).hasClass("zliczone")){
		ile++;
		if (ile == 8) {
			$("select").attr("disabled", "disabled");
		}	
	}
	$(this).addClass("zliczone");
})
});
</script>

EDIT2:

Oczywiście w sekcji mety strony należy dodać biblotekę jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

[Gumofon]

super, działa dokładnie taj jak chciałem, a w praktyce wygląda to tak:

https://kwiaty-ogrody.pl/?page_id=218

Bardzo dziękuję giker!

[Gumofon]

Witam,

Wracam do tematu, gdyż niedawno zauważyłem, że skrypt przestał działać poprawnie. Nadal funkcjonuje super na FF, Operze i Chrome. Niestety blokada nie działa pod IE. Spróbowałem podmienić wersję bibliotek na najnowszą ale to nie dało rezultatu. Na działanie nie miało też wpływu czy odniesienie do biblioteki jest w head czy w body. Gdyby ktoś mógł zaproponować poprawkę aby nadal działało pod IE, będę wdzięczny (mogę w zamian zaoferować linki)

Obecna wersja:

<script src="https://kwiaty-ogrody.pl/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
var ile = 0;
$(".searchform-input-wrapper select").addClass("niezliczone");
$(".searchform-input-wrapper select").change(function (){
if ($(this).hasClass("niezliczone")){
ile++;
if (ile == 9) {
$(".searchform-input-wrapper select.niezliczone").attr("disabled", "disabled");
}
$(this).toggleClass("niezliczone");
}
})
});
// ]]></script>

[giker]

Daj linka do strony gdzie to nie działa.

[Gumofon]

Link jest w poprzednim moim poście, chodzi o tę samą stronkę https://kwiaty-ogrody.pl/?page_id=218

Poprawnie działający skrypt po zaznaczeniu 8 opcji blokuje możliwość wyboru kolejnych. Na IE mi nie blokuje.

Nie działa mi ani w domu ani w pracy. W pracy mam IE 8. Może jest to kwestia wersji IE lub ustawień w przeglądarce, które "omijają" działanie tego skryptu?

[stat4seo]

Wystarczy wyłączyć obsługę JS. Kierowałbym się raczej ku temu by spróbować zoptymalizować/poprawić zapytanie do bazy danych niż ograniczać funkcjonalność wyszukiwarki...

[Gumofon]

Obługi JS nie mam wyłączonej, a jednak na IE skrypt nie działa.

[Gumofon]

Ponieważ nadal nie mam rozwiązania problemu, gdyby ktoś chciał to porpawić odpłatnie (albo zrobić inną blokadę formularza) to proszę o kontakt na PW. Pozdrawiam