Easiest way to include a form on multiple pages? (Beginner Question)

[jan]

My apologies for being a javascript beginner and asking such a basic
question. This is probably so easy that nobody ever mentions it.
Tutorials and places that tell of basic commands never seem to mention
what I want to do. I've looked into SSI, shtml, external javascript,
css, and html commands. There seems to be many solutions, but I would
like to focus on using the best and easiest solution.

I have a website with more than 1000 pages. I've built a form into
every page that links to a couple hundred major cities. It looks like
this:

<form name="majoruscities" onSubmit="return false;">
<select name="select"
onChange="window.document.location=window.document.majoruscities.select.value;">
<option value="#" selected>Major US Cities</option>
<option value="../ny/albany.html">Albany NY</option>
..
<option value="../ma/worcester.html">Worcester MA</option>
</select>
</form>

It works real good, and when I use website software it is easy to make
a change and have it appear throughout a web site.
However, this is a situation in which I am writing much of the html and
js manually. My methods seem very wasteful.
Instead of having the entire form be part of every html page I want to
call most of it seperately, from one source file. That way, if I want
to add, change, or remove a link from the form, I don't have to
regenerate every page. Also, it won't take up unnecessary space, and
won't have unnecessary upload times when I change them.

I imagine the easiest way would take a format something like what is
used to get an image source?????
<img src="../images/picture.jpeg">

Of all the solutions that work, which is preferred? Link to a good
example?
Thanks,
Jan

 

[Randy Webb]

jan said the following on 4/21/2006 5:03 PM:

My apologies for being a javascript beginner and asking such a basic
question. This is probably so easy that nobody ever mentions it.
Tutorials and places that tell of basic commands never seem to mention
what I want to do. I've looked into SSI, shtml, external javascript,
css, and html commands. There seems to be many solutions, but I would
like to focus on using the best and easiest solution.

Best and easiest? SSI.

Simpler but more error prone? Put your form in an iframe and put the
iframe on all pages.

 

[jan]

I started heading in that direction, made a couple attempts that
failed, but will try harder. Thanks!

 

[Thomas 'PointedEars' Lahn]

[...] I've looked into SSI, shtml, external javascript,
css, and html commands.

Much you have to learn, young apprentice ...

SHTML is simply SSI-enhanced HTML.
What do you think is "external javascript"?
CSS is a layout language. There are selectors and rules; no commands.
HTML is a markup language. There are elements and attributes; no commands.

There seems to be many solutions, but I would
like to focus on using the best and easiest solution.

That solution is certainly _not_ (only) client-side scripting.

I have a website with more than 1000 pages.

Those are documents, not pages. Each one consists of pages if displayed
in a paged medium; not in a graphical Web browser, for example; that is
continuous display (scrollbars).

I've built a form into every page that links to a couple hundred major
cities. It looks like this:

<form name="majoruscities" onSubmit="return false;">
<select name="select"
onChange="window.document.location=window.document.majoruscities.select.value;">
<option value="#" selected>Major US Cities</option>
<option value="../ny/albany.html">Albany NY</option>
.
<option value="../ma/worcester.html">Worcester MA</option>
</select>
</form>

There is no point in this `form' element. And users without client-side
script support cannot navigate to any of your many "pages". And keyboard
users will have problems selecting anything. And nobody will wait until
all your "couple hundred" "links" are loaded. And ...

It works real good,

Perhaps on your local machine/server or with a broadband connection to the
remote server.

and when I use website software it is easy to make
a change and have it appear throughout a web site.

So users are forced to download all that stuff they do not need, every time.
Great.

However, this is a situation in which I am writing much of the html and
js manually. My methods seem very wasteful.

Your entire approach is wrong.

Instead of having the entire form be part of every html page I want to
call most of it seperately, from one source file. That way, if I want
to add, change, or remove a link from the form, I don't have to
regenerate every page. Also, it won't take up unnecessary space, and
won't have unnecessary upload times when I change them.

What you really want is to split that list, organize it into countries, for
example; set up a search feature if necessary, and, most important, not to
rely on enabled client-side script support for basic navigation.

I imagine the easiest way would take a format something like what is
used to get an image source?????
<img src="../images/picture.jpeg">

Thereby making bad things even worse? Definitely not.

Of all the solutions that work,

For appropriate values of "work".

which is preferred?

Client-side scripting supported by server-side scripting, meeting the
requirements I mentioned above.

Link to a good example?

No. You have much greater problems than client-side scripting here, so
comp.infosystems.www.authoring.misc is where you should start instead
(probably they have a FAQ that explains the basics of Web authoring).

But if you come up with _reasonable_ code that does not work despite
your best efforts, you will receive help here regarding the client-side
scripting part of your problem.


HTH

PointedEars

 

[Prophet]

jan said the following on 4/21/2006 5:03 PM:

Best and easiest? SSI.

Simpler but more error prone? Put your form in an iframe and put the
iframe on all pages.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/

Can you explain "ssi" and "I Frame"?

 

[ASM]

Prophet a écrit :

Can you explain "ssi" and "I Frame"?

SSI = Server Side Includes
http://www.irt.org/articles/js166/index.htm
your pages must have shtml as extension
Works only on a server
(doesn't work in local on your computer except if opened in a web server)

insert this code where you want your form :
<!--#include virtual="/formCities.txt" -->

and at root of your site you have a file 'formCities.txt' containing :
<form name="majoruscities" onSubmit="return false;">
<select name="select"
onChange="window.document.location=window.document.majoruscities.select.value;">
<option value="#" selected>Major US Cities</option>
<option value="../ny/albany.html">Albany NY</option>
..
<option value="../ma/worcester.html">Worcester MA</option>
</select>
</form>


iframe = a frame inside each page where you want your form
(my NC4.5 doesn't understand 'iframe' !)

insert this code where you want your form :
<iframe src="/formCities.html" width="300" height="50">
Your browser doesn't understand iFrame, please go here :<br>
<a href="/formCities.html">Cities menu</a>
</iframe>

and at root of your site you have a file 'formCities.html' containing :
<html>
<form name="majoruscities" onSubmit="return false;">
<select name="select"
onChange="window.document.location=window.document.majoruscities.select.value;">
<option value="#" selected>Major US Cities</option>
<option value="../ny/albany.html">Albany NY</option>
..
<option value="../ma/worcester.html">Worcester MA</option>
</select>
</form>
</html>

 

[Randy Webb]

ASM said the following on 5/4/2006 5:08 AM:

Prophet a écrit :


SSI = Server Side Includes
http://www.irt.org/articles/js166/index.htm
your pages must have shtml as extension

Complete and utter nonsense. Even the page you cite says differently:

<quote>
Finally, you may activate SSI's for all files or only for files with a
special file extension (usually shtml).
</quote>

You can find that with a search of that page for shtml, its the first find.

What extensions that are allowed to do includes depends on server setup.