drop down selection box

T

the red dot

this is driving me crazy but i am trying to find some examples of a drop
down selection box with a go button that doesnt use javascript... is this
possible or am i barking up a very wrong tree?

at the moment i am using this from an example i got off the net - the other
problem i am having with this is that w3c validator doesnt like me using
'name' but if i change it to 'id' the go button doesnt work,

<form name="langan"class="dropdown">
<fieldset>
<legend>Choose a Film</legend>
<label for="film">Title: </label>
<select name="film" id="film">
<option value="#"></option>
<option value="#">Fighting the Taliban</option>
<option value="#">Meeting the Taliban</option>
<option value="php/afghan.php">Afghan Ladies' Driving School</option>
</select>
<input type="button" onclick="document.location =
document.langan.film.options
[document.langan.film.selectedIndex].value;"value="GO" />
</fieldset>
</form>

please pardon me for my total ignorance on this matter

you can see it in action (if it helps) here
http://www.mediatech.lincoln.ac.uk/krudeforth/langan/

thanks in advance
 
A

Adrienne Boswell

this is driving me crazy but i am trying to find some examples of a drop
down selection box with a go button that doesnt use javascript... is this
possible or am i barking up a very wrong tree?

What's wrong with plain links? What about users without javascript
(Google comes to mind)? How about:

<ul>
<li><a href="#">Fighting the Taliban</a></li>
<li><a href="#">Meeting the Taliban</a></li>
<li><a href="php/afghan.php">Afghan Ladies' Driving School</a></li></
</ul>
 
T

the red dot

Adrienne Boswell said:
What's wrong with plain links? What about users without javascript
(Google comes to mind)? How about:
im attempting to find a way to do it without javascript
plain links will mess up design/layout especially as the film titles are a
bit long in some case so if a user increases the font size too much the
whole thing will go mad
 
J

J.O. Aho

the said:
this is driving me crazy but i am trying to find some examples of a drop
down selection box with a go button that doesnt use javascript... is this
possible or am i barking up a very wrong tree?

You shouldn't hit the tree that much, it could get badly hurt, no you won't be
able to do that without javascript.

The "best" I can think of at this moment is that you make a small iframe with
the links in the place where you was thinking of having the drop down menu,
but this has the drawback that the main page will be reloaded, which makes
things slow, specially for the many americans who only are connected with a
slow modem or the 3rd world people with those cheap Linux laptops from UN.

By the way, the example you gave does use javascript.
 
T

the red dot

J.O. Aho said:
You shouldn't hit the tree that much, it could get badly hurt, no you won't be
able to do that without javascript.

The "best" I can think of at this moment is that you make a small iframe with
the links in the place where you was thinking of having the drop down menu,
but this has the drawback that the main page will be reloaded, which makes
things slow, specially for the many americans who only are connected with a
slow modem or the 3rd world people with those cheap Linux laptops from UN.

By the way, the example you gave does use javascript.
i know it does, i am looking for something that does the same but without
javascript - unless that is not possible.
i didnt really want to go the way of using simple text links because (even
though i have them at the bottom in a small font) to have them at the top
normal sized would get a bit crazy as more films are added. and (in regards
to a list) if ive got one list on one side and one on the other there would
hardly be any room for any content if a user increases text size -- eek i
hope that makes sense
 
T

the red dot

J.O. Aho said:
You shouldn't hit the tree that much, it could get badly hurt, no you won't be
able to do that without javascript.
ahh just seen the bit about it not being possible... damn, this could mean a
whole new layout coming up arghgh
unless i just have them small (as text links) at the top too, for those
without javascript... gah all this for the pesky ten percenters, i hope they
are very happy.
 
J

J.O. Aho

the said:
ahh just seen the bit about it not being possible... damn, this could mean a
whole new layout coming up arghgh
unless i just have them small (as text links) at the top too, for those
without javascript... gah all this for the pesky ten percenters, i hope they
are very happy.

Use the title="" option for the anchor-tag, this way you could use small fonts
on the link text and when the mouse pointer is over the link there will get a
tooltips which is a bigger and more readable than the link itself.

<a href="#" title="The link">the link</a>
 
T

the red dot

J.O. Aho said:
Use the title="" option for the anchor-tag, this way you could use small fonts
on the link text and when the mouse pointer is over the link there will get a
tooltips which is a bigger and more readable than the link itself.

<a href="#" title="The link">the link</a>
aha good idea captain.
 
A

Adrienne Boswell

im attempting to find a way to do it without javascript
plain links will mess up design/layout especially as the film titles
are a bit long in some case so if a user increases the font size too
much the whole thing will go mad

Yup, I see what you mean. Can you do it server side, and not be
dependent on js at all?

<form method="post" action="<?php_self?>"
<fieldset>
<legend>Choose a Film</legend>
<label for="film">Title: </label>
<select name="film" id="film" onchange="this.form.submit();">
<option value="#"></option>
<option value="#">Fighting the Taliban</option>
<option value="#">Meeting the Taliban</option>
<option value="php/afghan.php">Afghan Ladies' Driving School</option>
</select>
<input type="submit" "value="GO" />
</fieldset>
</form>

This will work for js browsers and non-jsbrowsers. Just put a little
php at the top looking for what the script submitted, and redirect from
there.
 
J

Jukka K. Korpela

Scripsit the red dot:
im attempting to find a way to do it without javascript

You're trying to do the wrong thing anyway. And you shouldn't try to create
web pages before you learn to write plain text using normal mixed case and
punctuation. When you master that, consider a short course on web design
fundamentals or HTML basics, whichever makes you more excited.
plain links will mess up design/layout especially as the film titles
are a bit long in some case so if a user increases the font size too
much the whole thing will go mad

If plain links mess up your design, your design is fundamentally wrong.
 
T

the red dot

Jukka K. Korpela said:
Scripsit the red dot:


You're trying to do the wrong thing anyway. And you shouldn't try to create
web pages before you learn to write plain text using normal mixed case and
punctuation. When you master that, consider a short course on web design
fundamentals or HTML basics, whichever makes you more excited.


If plain links mess up your design, your design is fundamentally wrong.
that may be so, but i dont want a webpage that is taken up with links
leaving no space for content which is what will happen if i also textually
include all the links to the films, as well as the links to other parts of
the website, particularly in the case of users increasing the size of the
text to their preferred size, alongside those who have their window
minimized, there has to be some middle ground here in regards to layout and
usability and users who are deliberately turning something off - why (stands
back and hides behind chair) should the ten percenters have so much power
over the design of a webpage?
http://www.mediatech.lincoln.ac.uk/krudeforth/langan/php/afghan.php
my webpage is fluid in design, the fonts are not fixed in size, if i had
text links or a list (of the films) a user increasing the font size and
looking at the webpage with a window of 600 width would only see links with
content dropping down and mucho scrolling needed. and i have small but not
fixed (textual) links to the films at the bottom of the page which those
with javascript (deliberately turned off) can use.
 
T

the red dot

Adrienne Boswell said:
Yup, I see what you mean. Can you do it server side, and not be
dependent on js at all?

<form method="post" action="<?php_self?>"
<fieldset>
<legend>Choose a Film</legend>
<label for="film">Title: </label>
<select name="film" id="film" onchange="this.form.submit();">
<option value="#"></option>
<option value="#">Fighting the Taliban</option>
<option value="#">Meeting the Taliban</option>
<option value="php/afghan.php">Afghan Ladies' Driving School</option>
</select>
<input type="submit" "value="GO" />
</fieldset>
</form>

This will work for js browsers and non-jsbrowsers. Just put a little
php at the top looking for what the script submitted, and redirect from
there.
ahh i seem to remember seeing that on my google travels but couldnt quite
get my head around it, is it possible for you to post the link (if you have
it) so i can go and have another (deeper) investigation, what do you mean by
put a little php at the top? as usual the more i know the less i seem to
understand.
 
J

J.O. Aho

the said:
that may be so, but i dont want a webpage that is taken up with links
leaving no space for content which is what will happen if i also textually
include all the links to the films, as well as the links to other parts of
the website, particularly in the case of users increasing the size of the
text to their preferred size, alongside those who have their window
minimized, there has to be some middle ground here in regards to layout and
usability and users who are deliberately turning something off - why (stands
back and hides behind chair) should the ten percenters have so much power
over the design of a webpage?
http://www.mediatech.lincoln.ac.uk/krudeforth/langan/php/afghan.php
my webpage is fluid in design, the fonts are not fixed in size, if i had
text links or a list (of the films) a user increasing the font size and
looking at the webpage with a window of 600 width would only see links with
content dropping down and mucho scrolling needed. and i have small but not
fixed (textual) links to the films at the bottom of the page which those
with javascript (deliberately turned off) can use.

You can use the <noscript> tag, make the dropdown to use javascript,

<select ...>
<noscript><option>Use the links at the bottom</option></noscript>
<option ..>First option</option>
...
</select>

You could even set the dropdown in a hidden div, use javascript to make it
visible, that way those without javascript enabled won't see it at all, you
could still use the <noscript> to make a link to the bottom of the page, so
they can get down there fast if they want to see the links.



And then in the bottom you can add text links with

<noscript><a href="www.kabul.example.com">Kabul City information</a></noscript>


Another option is to have those links on the right side menu in it's own
little box.
 
T

the red dot

J.O. Aho said:
You can use the <noscript> tag, make the dropdown to use javascript,

<select ...>
<noscript><option>Use the links at the bottom</option></noscript>
<option ..>First option</option>
...
</select>

You could even set the dropdown in a hidden div, use javascript to make it
visible, that way those without javascript enabled won't see it at all, you
could still use the <noscript> to make a link to the bottom of the page, so
they can get down there fast if they want to see the links.



And then in the bottom you can add text links with

<noscript><a href="www.kabul.example.com">Kabul City
information said:
Another option is to have those links on the right side menu in it's own
little box.
hmmm interesting, i shall investigate further thankyou.
 
J

J.O. Aho

the said:
ahh i seem to remember seeing that on my google travels but couldnt quite
get my head around it, is it possible for you to post the link (if you have
it) so i can go and have another (deeper) investigation, what do you mean by
put a little php at the top? as usual the more i know the less i seem to
understand.

You must use a redirect page specially if you want to use anchors in the same
page.

In your html pages:

<form method="post" action="redirect.php"
<fieldset>
<legend>Choose a Film</legend>
<label for="film">Title: </label>
<select name="film" id="film" onchange="this.form.submit();">
<option value="#"></option>
<option value="#">Fighting the Taliban</option>
<option value="#">Meeting the Taliban</option>
<option value="php/afghan.php">Afghan Ladies' Driving School</option>
</select>
<noscript><input type="submit" "value="GO" /></noscript>
</fieldset>
</form>

I assume the "this.form.submit()" works when the javascript is enabled, then
in theory you wouldn't need the submit button, so set it inside noscript tags
that should enable the button for none javascripters (may not work n old
browsers like mosaic).


--- redirect.php ---
<?PHP
switch($_REQUEST['film']) {
case 'taliban':
header('Location: http://www.example.net/pagename.html');
exit;
case 'driver':
header('Location: http://www.example.net/afghan.html');
exit;
case '#hello':
/* not sure if this works */
header('Location: http://www.example.net/afghan.html#hello');
exit;
default:
header('Location: http://www.example.net');
exit;
}
?>
--- eof ---

Using a redirect script makes you need only one server side script instead of
making all your pages to server side scripts.
 
T

the red dot

J.O. Aho said:
the said:
ahh i seem to remember seeing that on my google travels but couldnt quite
get my head around it, is it possible for you to post the link (if you have
it) so i can go and have another (deeper) investigation, what do you mean by
put a little php at the top? as usual the more i know the less i seem to
understand.

You must use a redirect page specially if you want to use anchors in the same
page.

In your html pages:

<form method="post" action="redirect.php"
<fieldset>
<legend>Choose a Film</legend>
<label for="film">Title: </label>
<select name="film" id="film" onchange="this.form.submit();">
<option value="#"></option>
<option value="#">Fighting the Taliban</option>
<option value="#">Meeting the Taliban</option>
<option value="php/afghan.php">Afghan Ladies' Driving School</option>
</select>
<noscript><input type="submit" "value="GO" /></noscript>
</fieldset>
</form>

I assume the "this.form.submit()" works when the javascript is enabled, then
in theory you wouldn't need the submit button, so set it inside noscript tags
that should enable the button for none javascripters (may not work n old
browsers like mosaic).


--- redirect.php ---
<?PHP
switch($_REQUEST['film']) {
case 'taliban':
header('Location: http://www.example.net/pagename.html');
exit;
case 'driver':
header('Location: http://www.example.net/afghan.html');
exit;
case '#hello':
/* not sure if this works */
header('Location: http://www.example.net/afghan.html#hello');
exit;
default:
header('Location: http://www.example.net');
exit;
}
?>
--- eof ---

Using a redirect script makes you need only one server side script instead of
making all your pages to server side scripts.
crikey, cheers mate, i'll have a look at this properly later...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top