469,342 Members | 5,866 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,342 developers. It's quick & easy.

Javascript/Function to choose between target pages?

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
Jul 23 '05 #1
6 1771
Penny wrote:
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>
Jul 23 '05 #2
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.
"Randell D." <re******************************@fiprojects.moc > wrote in
message news:jlFQd.406186$8l.384446@pd7tw1no...
Penny wrote:
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>

Jul 23 '05 #3
Randell D. wrote:
Penny wrote:
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...
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...

Jul 23 '05 #4
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.

"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
Randell D. wrote:
Penny wrote:
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...


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...

Jul 23 '05 #5
Penny wrote:
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.

"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
Randell D. wrote:
Penny wrote:
> 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


(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. ;-)

Jul 23 '05 #6
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

"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@c13g2000cwb.googlegr oups.com...
Penny wrote:
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.

"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
Randell D. wrote:
> Penny wrote:
> > 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


(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. ;-)

Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.