473,399 Members | 2,159 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,399 software developers and data experts.

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 1929
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: John Ortt | last post by:
Hi Everyone, I have created a Javascript menu for my site which uses frames. The first stage loads fine but I want two drill down menus ("About Me Menu" and "Projects Menu"). The pages load...
8
by: rajesh | last post by:
< script language = javascript c =...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.