Need some javascript help for searches

TristanP

As seen in this great thread, there is a way to do numerical searches by keyword. I have it working on my homepage (tristansphotography.smugmug.com), but only with two variables (number and series). What I'd like to do is have a search box for each type of racing - currently motorcycles and cars - and have each search look at three variables (all pulled from keywords). Motorcycles would be searched by rider number, Novice/Expert status, and race series (WERA, CCS, etc). Cars would be searched by (for now) Class, Make, and Color.

Currently my Customization section has:

function doTheSearch()
{
var n = document.bikesearch.number.value;
var b = document.bikesearch.series.options[document.bikesearch.series.selectedIndex].value;
if ( n=="" && b=="" ) {
return;
}
var newUrl = "/keyword/";
if ( n!="" && b!="" ) {
newUrl += n + "-" + b;
}
else if ( n=="" ) {
newUrl += b;
}
else {
newUrl += n;
}
window.location = newUrl;
}

and the matching html for that is:

<table border=1>
<tr>
<td>
<form name="bikesearch" action="">
<table border=0 cellpadding=2>
<tr>
<td>
Enter your bike number:
<input name=number size=3>
</td>
<td valign=middle>
Series:
<select name=series>
<option value="WERA">WERA
</select>
</td>
<td>
<input type="button" name=search value="Search" onClick="doTheSearch()">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Manipulating the html to get all drop downs and customizing each option is no sweat - I have all that working in a test gallery.

Some code for three variables that someone guessed at on another forum is this, but I changed all the n to d, b to e, and c to f so as to not interfere with the existing working variables for the two-variable search:

<!--
function doTheSearch_new()
{
var n = document.bikesearch.number.value;
var b = document.bikesearch.series.options[document.bikesearch.series.selectedIndex].value;
var c = document.bikesearch."type".value; ** This would need to also be an option like the b variable.**

if ( n=="" && b=="" && c=="") {
return;
}
var newUrl = "/keyword/";
if ( n!="" && b!="" && c!="") {
newUrl += n + "-" + b + "-" + c;
}
else if ( n=="" ) {
if ( b!="" && c != "" ) {
newUrl += b + "-" +c;}
else {
if ( b!="") {
newUrl += b;}
else {
newUrl += c;}
}
}
else if ( b=="" ) {
if ( n!="" && c != "" ) {
newUrl += n + "-" +c;}
else {
if ( n!="") {
newUrl += n;}
else {
newUrl += c;}
}
)
else {
if ( n!="" && b != "" ) {
newUrl += n + "-" + b;}
else {
if ( b=="") {
newUrl += n;}
else {
newUrl += b;}
}
}

window.location = newUrl;
}
// -->


Not knowing any js, I have several issues.

1. When I paste the second section of code into my customization box, the first stops working. Is there something going on that causes interference between the two? Will they not run concurrently?

2. Is the three-variable code correct?

3. Is this even possible or do the two code sections need to be combined?

What do I need to do to get this working? I really apreciate any help you can offer.

devbobo

Hey Tristan,

Firstly, I simplified the code

<!--
function doTheSearch_new()
{
  var n = document.bikesearch.number.value;
  var b = document.bikesearch.brand.options[document.bikesearch.brand.selectedIndex].value;
  var c = document.bikesearch.type.options[document.bikesearch.type.selectedIndex].value;

  var newUrl = "";

  newUrl += n;

  if (newUrl != "")
    newUrl += "-";

  newUrl += b;

  if (newUrl != "")
    newUrl += "-";

  newUrl += c;

  if (newUrl != "")
    window.location = "/keyword/" + newUrl;
  else
    return;
}
// -->

<table border=1>
<tr>
<td>
<form name="bikesearch" action="">
<table border=0 cellpadding=2>
<tr>
<td>
Enter your bike number:
<input name=number size=3>
</td>
<td valign=middle>
Series:
<select name=series>
<option value="WERA">WERA
</select>
</td>
<td valign=middle>
Type:
<select name=type>
<option value="type1">Type1
</select>
</td>
<td>
<input type="button" name=search value="Search" onClick="doTheSearch_new()">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

It should all be possible, can you let me know if this works.

Cheers,

David

TristanP

I replaced the two-variable code with your new code and stuck the new html in my test search gallery. When I attempt to run the search, I get a js error:

Line 25
char 3
'document.bikesearch.number.value' is null or not an object

Line 25 in my js section is:
" var b = document.bikesearch.brand.options[document.bikesearch.brand.selectedIndex].value;"

I then changed the js "...bikesearch.brand..." to "...bikesearch.series..." to match the "select name=series" line in the html, but no change.

Related question: Does the x in "document.bikesearch.x.options" have to match the "select name=x" in the html?