Javascript/Function to choose between target pages?

[Penny]

Hi all,

I've built a simple search <Form> on a web page that is intended to allow
the user to search a record store database. There is a drop down box where
the user can choose either 'Artist' or 'Title', next is a text box where
they enter their 'Keyword' and next is the search button. For example the
user may choose 'Artist', type 'Bob Dylan', click the search button and be
presented with a page showing all the details of the Bob Dylan recordings
the record store have in stock.

Thing is, the 'Results' details for Artists and Recordings have different
fields so I use two different pages to display them. Therefore I need a way
for the page to check whether 'Artist' or 'Recording' is selected in the
drop down box and then open the appropriate page. My database search and
connection are fine I just need the javascript and call from the form.

Any ideas?

Penny

 

[Randell D.]

Hi all,

I've built a simple search <Form> on a web page that is intended to allow
the user to search a record store database. There is a drop down box where
the user can choose either 'Artist' or 'Title', next is a text box where
they enter their 'Keyword' and next is the search button. For example the
user may choose 'Artist', type 'Bob Dylan', click the search button and be
presented with a page showing all the details of the Bob Dylan recordings
the record store have in stock.

Thing is, the 'Results' details for Artists and Recordings have different
fields so I use two different pages to display them. Therefore I need a way
for the page to check whether 'Artist' or 'Recording' is selected in the
drop down box and then open the appropriate page. My database search and
connection are fine I just need the javascript and call from the form.

Any ideas?

Penny

I'm a newbie with javascript (about six months or so) so I hope I can
help point you in the right direction...

If you have a form called formName, and a select box called mySelectBox
then selectedItem will have the value of the selected OPTION tag.

var selectedItem = document.formName.mySelectBox.selectedIndex;

Thus, something like

<form name="formName" method="POST">
<select name="mySelectBox">
<option value="artist">Artist</option>
<option value="recording">Recording</option>
</select>

Depending on what you had selected, selectedItem would have the value
'artist' or 'recording'.

I believe I'm correct above... Does this give you some direction?

randelld
</form>

 

[Penny]

Randell D,

Thanks for your help. Yes, I think you are giving me some direction.

I guess now the 'Submit' buttons onClick event must call a function that
tests the value of selectedIndex and then redirects the browser to the
appropriate page.

Do you know the code I can use to direct the browser to a given page from
within the called function?

Thanks again.

Penny.

 

[RobB]

I'm a newbie with javascript (about six months or so) so I hope I can

help point you in the right direction...

No crime in being a newb - but you should *test* your assumptions
before posting them, so as not to mislead. Even experienced posters do.

If you have a form called formName, and a select box called mySelectBox
then selectedItem will have the value of the selected OPTION tag.

var selectedItem = document.formName.mySelectBox.selectedIndex;

No - it will have the index (position) of the selected option in the
options[] collection.

Thus, something like

<form name="formName" method="POST">
<select name="mySelectBox">
<option value="artist">Artist</option>
<option value="recording">Recording</option>
</select>

Depending on what you had selected, selectedItem would have the value

'artist' or 'recording'.

(snip)

Nope...it would hold the integer 0 or 1. You get the value by
specifying it:

document.formName.mySelectBox.value

....although to support older browsers, this:

var s = document.formName.mySelectBox;
var selectedItem = s.options[s.selectedIndex].value

....is more common.

Penny...why not use radios? If there are only two (or maybe three)
options it's a logical choice. More to the point: why do you need to do
anything at the client (browser) at all? The server should be able to
process the form data and respond accordingly...

 

[Penny]

Thanks Rob,

The user must choose whether they are searching on Artists or Titles and
each of those two has a different results page so this page must itself
decide which page to redirect to. Also, that's the way it usually seems to
be done on record store websites (rollingstone.com for example, but I can't
see figure how they've done it in their source code).

Regards,
Penny.

I'm a newbie with javascript (about six months or so) so I hope I can

help point you in the right direction...

No crime in being a newb - but you should *test* your assumptions
before posting them, so as not to mislead. Even experienced posters do.

If you have a form called formName, and a select box called mySelectBox
then selectedItem will have the value of the selected OPTION tag.

var selectedItem = document.formName.mySelectBox.selectedIndex;

No - it will have the index (position) of the selected option in the
options[] collection.

Thus, something like

<form name="formName" method="POST">
<select name="mySelectBox">
<option value="artist">Artist</option>
<option value="recording">Recording</option>
</select>

Depending on what you had selected, selectedItem would have the value

'artist' or 'recording'.

(snip)

Nope...it would hold the integer 0 or 1. You get the value by
specifying it:

document.formName.mySelectBox.value

...although to support older browsers, this:

var s = document.formName.mySelectBox;
var selectedItem = s.options[s.selectedIndex].value

...is more common.

Penny...why not use radios? If there are only two (or maybe three)
options it's a logical choice. More to the point: why do you need to do
anything at the client (browser) at all? The server should be able to
process the form data and respond accordingly...

 

[RobB]

Thanks Rob,

The user must choose whether they are searching on Artists or Titles and
each of those two has a different results page so this page must itself
decide which page to redirect to. Also, that's the way it usually seems to
be done on record store websites (rollingstone.com for example, but I can't
see figure how they've done it in their source code).

Regards,
Penny.

(snip)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function checkform(f)
{
var els = f.elements,
msg = '';
if (/^\s*$/.test(els.keyword.value))
{
msg += 'Please enter a keyword.\n';
msg += '\nThank you, dude.\n';
alert(msg);
els.keyword.focus();
return false;
}
else
{
f.action = ['artist.html','title.html'][els.what[0].checked?0:1];
return true;
}
}

</script>
</head>
<body>
<form action="artist.html" onsubmit="return checkform(this)">
<h4>Search for:</h4>
<ul>
<li>artist
<input type="radio"
name="what"
value="artist"
checked="checked" />
</li>
<li>
title &nbsp;
<input type="radio"
name="what"
value="recordings" />
</li>
</ul>
<h4>Keyword <input type="text" name="keyword" value="" /></h4>
<input type="submit" value="search" />
</form>
</body>
</html>

No sure if that helps. Server-based processing is always better; you
can dynamically assemble the entire response page based on query data.
JS-disabled, no problem, HTML fine. Just fyi. ;-)

 

[Penny]

Thanks for the help Rob,

I'm having a good look at your code and I'll see what I can do with it.

Penny

Thanks Rob,

The user must choose whether they are searching on Artists or Titles and
each of those two has a different results page so this page must itself
decide which page to redirect to. Also, that's the way it usually seems to
be done on record store websites (rollingstone.com for example, but I can't
see figure how they've done it in their source code).

Regards,
Penny.

(snip)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function checkform(f)
{
var els = f.elements,
msg = '';
if (/^\s*$/.test(els.keyword.value))
{
msg += 'Please enter a keyword.\n';
msg += '\nThank you, dude.\n';
alert(msg);
els.keyword.focus();
return false;
}
else
{
f.action = ['artist.html','title.html'][els.what[0].checked?0:1];
return true;
}
}

</script>
</head>
<body>
<form action="artist.html" onsubmit="return checkform(this)">
<h4>Search for:</h4>
<ul>
<li>artist
<input type="radio"
name="what"
value="artist"
checked="checked" />
</li>
<li>
title &nbsp;
<input type="radio"
name="what"
value="recordings" />
</li>
</ul>
<h4>Keyword <input type="text" name="keyword" value="" /></h4>
<input type="submit" value="search" />
</form>
</body>
</html>

No sure if that helps. Server-based processing is always better; you
can dynamically assemble the entire response page based on query data.
JS-disabled, no problem, HTML fine. Just fyi. ;-)