[Date Prev][Date Next][Thread Prev][Thread Next][Minivend by date
][Minivend by thread
]
Advanced Search using minivend + javascript
Some time ago, I posted a question on this mailing-list but did not get an
answer... I thought about it and finally figured out a solution...
One of you might have tried to customize a Search page with Minivend but felt
limited when allowing the user to customize the search fields/values using an
HTML Form... here is the answer to that problem;
The key here is to create a one-click search and POST-PROCESS the "HREF" value
before actually returning it to minivend. I find that method to be very flexible compared
to the Minivend's [process-search] method.
I provide a source code example from what you can derive your own page.
Here it is:
------8<------ cut here -----8<------
<html>
<head>
<script language="JavaScript">
<!--
function processForm(myLink)
{
var idx,str,val1,val2,retVal;
var popular,newProduct,awards,day_care;
var language,searchText,fieldName,designed;
var price,rangeMin,rangeMax;
language = document.srchForm.language;
searchText = document.srchForm.searchText;
fieldName = document.srchForm.fieldName;
designed = document.srchForm.designed;
popular = document.srchForm.is_popular;
newProduct = document.srchForm.is_new;
awards = document.srchForm.awards;
day_care = document.srchForm.day_care_suitable;
price = document.srchForm.price;
str = "";
retVal = true;
// Get the Design location from the listbox
idx = designed.selectedIndex;
if( idx != 0 )
{
val1 = designed.options[idx].value;
str += "/su=no/sf=conception/se=" + val1;
}
// Get the Language from the listbox
idx = language.selectedIndex;
if( idx != 0 )
{
val1 = language.options[idx].value;
str += "/su=no/sf=toy_language/se=" + val1;
}
// Get the Field Name from the listbox & searchText from textarea
idx = fieldName.selectedIndex;
if( idx != 0 )
{
val1 = fieldName.options[idx].value;
val2 = searchText.value;
if (val2 == "")
{
alert("[L]You must enter a text value for text search[/L].");
retVal = false;
}
str += "/su=yes/sf=" + val1 + "/se=" + val2;
}
if( popular.checked == true )
{
str += "/su=no/sf=is_popular/se=1"
}
if( newProduct.checked == true )
{
str += "/su=no/sf=is_new/se=1"
}
if( awards.checked == true )
{
str += "/su=no/sf=awards/se=1"
}
if( day_care.checked == true )
{
str += "/su=no/sf=day_care_suitable/se=1"
}
if( price.checked == true )
{
rangeMin = document.srchForm.range_min.value;
rangeMax = document.srchForm.range_max.value;
if (rangeMin >= rangeMax)
{
alert("[L]Invalid price range[/L].");
retVal = false;
}
str += "/rl=price" + "/rm=" + rangeMin + "/rx=" + rangeMax;
}
/* parse the HREF value built by [area scan] to find the previous and next
* substring where to insert our new query parameters
* everything after "/st=sql" and before "?" in the HREF
* will be replaced by our new query parameters
*/
idx = myLink.href.lastIndexOf("sql") + 3; // inserts right after "/st=sql"
prevStr = myLink.href.substring(0,idx); // insert before "?"
idx = myLink.href.lastIndexOf("?");
nextStr = myLink.href.substring(idx, myLink.href.length-1);
// insert our parameters in between
myLink.href = prevStr + str + nextStr;
return retVal;
}
-->
</script>
[body 1]
<table align=center> <td>
<FORM name="srchForm" onSubmit="return false;">
[L]Designed in[/L]:
<SELECT name="designed" size="1">
<OPTION value="default"> [L]-select design location-[/L]
<OPTION value="1"> [L]quebec[/L]
<OPTION value="2"> [L]canada[/L]
<OPTION value="3"> [L]other[/L]
</SELECT><BR>
<BR>
[L]Toy language[/L]:
<SELECT name="language" size="1">
<OPTION value="default"> [L]-select language-[/L]
<OPTION value="1"> [L]french[/L]
<OPTION value="2"> [L]english[/L]
<OPTION value="3"> [L]french & english[/L]
<OPTION value="4"> [L]french, english & others[/L]
</SELECT> <BR>
<BR>
[L]Search text field[/L]: <BR>
<SELECT name="fieldName" size="1">
<OPTION value="default"> [L]-select search field-[/L]
<OPTION value="brand"> [L]brand[/L]
<OPTION value="[L]toy_name[/L]"> [L]toy name[/L]
</SELECT>
<INPUT type="text" size="20" name="searchText" value=""><BR>
<BR>
<INPUT type="checkbox" name="is_popular"> [L]Popular products[/L] <BR>
<INPUT type="checkbox" name="is_new" > [L]New products[/L] <BR>
<INPUT type="checkbox" name="awards" > [L]Awarded products[/L] <BR>
<INPUT type="checkbox" name="day_care_suitable" > [L]Day-care suitable products[/L] <BR>
<BR>
<INPUT TYPE=checkbox NAME="price"> [L]Price range[/L]:
[L]from[/L]: <INPUT type="text" size="10" name="range_min" value="10">
[L]to[/L]: <INPUT type="text" size="10" name="range_max" value="15"> <BR>
<BR>
</FORM>
</td>
<tr><td>
<A MV="area scan os=no/ml=10/tf=price,code/st=sql" HREF="scan.html" onClick="'return processForm(this)'">[L]search[/L]</A>
</td></tr>
</table>
</body>
</html>
------8<------ cut here -----8<------
Any questions/comments can be sent to me, I'll be happy to help!
-- marc
Useless Invention: How-to cassettes for the deaf.
[body 1]