Select Box Value and JS [Archive]

View Full Version : Select Box Value and JS

Dalziel

01-30-2003, 12:46 PM

If I had an input box called temperature in a form called converter and wanted to change it's value I'd use:

document.converter.temperature.value == "Whatever";

I have an form called sform and a select menu called engines, I want to give each element a different value, I want to do it from an external .js file, how do I do it? (I don't want to use value in the <option> tag because it's going on multiple pages and since the value will be a URL it will look tidier if someone views the source and I haven't done that)

beetle

01-30-2003, 02:35 PM

You want clean source when people look at it? :rolleyes:

Anyway, uhh, I'm not exactly sure what you are doing, but here's a tip

in a form like this

<form>
<select onchange="doSomething( this.form );">

</select>
</form>

See what I highlighted? That passes a form reference to the function.

Dunno if that helps

Dalziel

01-30-2003, 04:17 PM

Sorry, that didn't really help, I'll show you exactly what I'm doing

***EDIT***
There are about 35 options on the actual form, I cut most of them out of this post because you don't need them to see what I'm doing and it would have made the post a load longer.

This will go in an external JS file when finished
<script language="javascript" type="text/javascript">
function ssite()
{
var url = document.sform.site.options[document.sform.site.selectedIndex].value;
url = url + document.sform.sturm.value;
A = 0;
B = 0;
C = 0;

if (document.sform.sturm.value == "")
{
A++;
}

if (document.sform.site.options[document.sform.site.selectedIndex].value == "search")
{
B = 2;
}

C = A + B;
iferror = "\n\nIf you think you have received this message in error please contact webmaster@searcharoo.cjb.net and describe the circumstances of this message appearing as best as possible.";

switch (C)
{
case 1:
alert("ERROR:\n\nYou did not enter a search term, therefore there is nothing for us to search for. Please enter a search term then try again." + iferror);
break;
case 2:
alert("ERROR:\n\nYou did not select a search engine to search, please select a search engine from our dropdown list then try again." + iferror);
break;
case 3:
alert("ERROR:\n\nYou did not enter a search term or select a search engine to use, please select a search engine and enter a search term then try again." + iferror);
break;
default:
top.window.location.href = url;
break;
}

}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
if (isNav)
{
document.captureEvents(Event.KEYPRESS);
}
document.onkeypress = handlerKP;
function handlerKP(e)
{
kp = (isNav) ? e.which : event.keyCode
if (kp==13) ssite()
}
</script>

This is the form that goes in the page
<form name="sform" style="text-align: center" onsubmit="return false">
<input type="text" name="sturm">
<select name="site" size="1">
<option value="search">Search Engine!</option>
<option value="http://www.active7.com/srch?msx=">Active7</option>
<option value="http://www.alltheweb.com/search?cat=web&cs=utf-8&l=any&q=">Alltheweb</option>
<option value="http://www.alltheweb.com/search?cat=img&cs=utf-8&q=">Alltheweb (Images)</option>
<option value="http://uk.altavista.com/q?pg=q&q=">Altavista</option>
<option value="http://www.altavista.com/sites/search/res_text?q=">Altavista (Text)</option>
<option value="http://search.yahoo.com/bin/search?p=">Yahoo</option></select>
<input type="button" value="Search" onclick="javascript:ssite()"></form>

I want to put the URLs in the .js file so people don't see the URLs, this will make the code look neater and mean each HTML file is smaller since that form is going in every page.

arnyinc

01-30-2003, 04:48 PM

All of the javascript in the <head></head> can go in your .js file. Just to call out the changes I made:

1. In the form, remove the urls and make them site1, site2, etc.
2. Declare site1, site2, etc equal to the corresponding url. I'm not sure if it is more proper to declare these globally, like I did, or locally inside the function.
3. On the second line of the ssite() function I changed url to eval(url).

<html>
<head>
<script language="javascript">
var site1='http://www.active7.com/srch?msx=';
var site2='http://www.alltheweb.com/search?cat=web&cs=utf-8&l=any&q=';
var site3='http://www.alltheweb.com/search?cat=img&cs=utf-8&q=';
var site4='http://uk.altavista.com/q?pg=q&q=';
var site5='http://www.altavista.com/sites/search/res_text?q=';
var site6='http://search.yahoo.com/bin/search?p=';

function ssite()
{
var url = document.sform.site.options[document.sform.site.selectedIndex].value;
url = eval(url) + document.sform.sturm.value;
A = 0;
B = 0;
C = 0;

if (document.sform.sturm.value == "")
{
A++;
}

if (document.sform.site.options[document.sform.site.selectedIndex].value == "search")
{
B = 2;
}

C = A + B;
iferror = "\n\nIf you think you have received this message in error please contact webmaster@searcharoo.cjb.net and describe the circumstances of this message appearing as best as possible.";

switch (C)
{
case 1:
alert("ERROR:\n\nYou did not enter a search term, therefore there is nothing for us to search for. Please enter a search term then try again." + iferror);
break;
case 2:
alert("ERROR:\n\nYou did not select a search engine to search, please select a search engine from our dropdown list then try again." + iferror);
break;
case 3:
alert("ERROR:\n\nYou did not enter a search term or select a search engine to use, please select a search engine and enter a search term then try again." + iferror);
break;
default:
top.window.location.href = url;
break;
}

}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
if (isNav)
{
document.captureEvents(Event.KEYPRESS);
}
document.onkeypress = handlerKP;
function handlerKP(e)
{
kp = (isNav) ? e.which : event.keyCode
if (kp==13) ssite()
}
</script>
</head>
<body>
This is the form that goes in the page
<form name="sform" style="text-align: center" onsubmit="return false">
<input type="text" name="sturm">
<select name="site" size="1">
<option value="search">Search Engine!</option>
<option value="site1">Active7</option>
<option value="site2">Alltheweb</option>
<option value="site3">Alltheweb (Images)</option>
<option value="site4">Altavista</option>
<option value="site5">Altavista (Text)</option>
<option value="site6">Yahoo</option></select>
<input type="button" value="Search" onclick="javascript:ssite();"></form>
</body>
</html>

beetle

01-30-2003, 04:55 PM

Why not use NO values and just go off the selected index?

var urls = [
'http://www.active7.com/srch?msx=',
'http://www.alltheweb.com/search?cat=web&cs=utf-8&l=any&q=',
'http://www.alltheweb.com/search?cat=img&cs=utf-8&q=',
'http://uk.altavista.com/q?pg=q&q=',
'http://www.altavista.com/sites/search/res_text?q=',
'http://search.yahoo.com/bin/search?p='
];

function ssite()
{
var url = urls[document.sform.site.selectedIndex];
var A = B = C = 0; // <-- little shorthand here ;)

arnyinc

01-30-2003, 08:59 PM

That's an awfully clever way of doing it. Much shorter too.

Dalziel

01-30-2003, 10:12 PM

arnyinc: I just copied and pasted your code an unfortunately IE5.5 threw up an error and wouldn't run.

beetle: you only showed a snippet of code, I don't know how to implement it.

:(

Dalziel

01-31-2003, 12:20 PM

Can anyone help me? Pleeeeeeeeeeze?

I CATEGORICALLY DENY POSTING THIS TO GET THE THREAD LISTED AT THE TOP ON "LAST POST TIME" VIEWING TO GET IT READ MORE

glenngv

01-31-2003, 12:38 PM

beetle just showed you what you have to do.

replace this:

var url = document.sform.site.options[document.sform.site.selectedIndex].value;

with this:

var url = urls[document.sform.site.selectedIndex];

and add the urls array that beetle made.

arnyinc

01-31-2003, 01:15 PM

Originally posted by Dalziel
arnyinc: I just copied and pasted your code an unfortunately IE5.5 threw up an error and wouldn't run.
:(

There's something weird with the forum that adds a space into "javascript:". Copy and paste my code again and it will turn up an error on line 74, and you can see that it says "java script:" so just remove that space.

glenngv

01-31-2003, 01:42 PM

FYI, you can type javascript: without spaces by typing:

javascript&#58;

Dalziel

02-01-2003, 07:23 PM

arnyincs code works but when i alter it to beetle's version it doesnt return an error but when i click submit (search button) the page just goes blank :(

Dalziel

02-12-2003, 06:24 PM

Originally posted by beetle
Why not use NO values and just go off the selected index?

var urls = [
'http://www.active7.com/srch?msx=',
'http://www.alltheweb.com/search?cat=web&cs=utf-8&l=any&q=',
'http://www.alltheweb.com/search?cat=img&cs=utf-8&q=',
'http://uk.altavista.com/q?pg=q&q=',
'http://www.altavista.com/sites/search/res_text?q=',
'http://search.yahoo.com/bin/search?p='
];

function ssite()
{
var url = urls[document.sform.site.selectedIndex];
var A = B = C = 0; // <-- little shorthand here ;)

I can't get that to work, when I click the submit button with it made that way the page just goes blank :( any idea why?