1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:58 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Need help with Javascript

Can't get INPUT to open url - aaaauuuugh !

         

walrus

2:04 pm on Sep 17, 2006 (gmt 0)

10+ Year Member



Hi, i have looked hi and lo for a simple drop menu that has an input button instead of auto opening the url. Ive been trying to control the hover colors and replace them with images. Looks really great but it will not open url on input click. It didnt come with an input and i keep failing trying to add one. Can anyone tell me what the error is?
Or errors are?

<html>
<head>
<title>test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta name="Copyright" content="(CC) 1999-2005 Easy! Designs, LLC. Except where otherwise noted, this site is licensed under a Creative Commons License." />
<style type="text/css">
input {
display: block;
margin: 0 0 10px;
border: 0px solid #666;
background: url(test1.jpg) bottom left no-repeat;
}
select {
display: block;
width: 130px;
}

select.replaced {
display: none;
}
ul.selectReplacement {
background: url(test2.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 1.65em;
width: 130px;
}
ul.selectReplacement li {
background: url(test3.jpg) bottom left no-repeat;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 130px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(test4.jpg) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: url(test5.jpg) bottom left no-repeat;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: url(test6.jpg) bottom left no-repeat;
filter: Alpha(Opacity=100 );
color: #fff;

}

div.drop {
position: absolute;
top: 132px;
left: 179px;
width: 130px;
height: 18px;
font-size: .8em;
color: navy;
z-index: 3;
text-align: left;
background-color: transparent;

}
div.drop2 {
position: absolute;
top: 132px;
left: 345px;
width: 130px;
height: 18px;
font-size: .8em;
color: navy;
z-index: 3;
text-align: left;
background-color: transparent;

}
table {
width: 100%;
height: 100%;
}
.table2 {
width: 100%;
height: 100%;
background-color: transparent;
}

td {
vertical-align: middle;
text-align: center;
background-color: transparent;
}
.td2 {
vertical-align: middle;
text-align: left;
background-color: transparent;
}
div.container {
position: floating;
margin: 0 auto;
width: 780px;
height: 432px;
text-align: left;
}

div.left {
position: absolute;
top: 180px;
left: 600px;
width: 140px;
height: 468px;
background-color: transparent;
font-size: .8em;
color: red;
text-align: center;
background-color: transparent;
}

div.right {
position: absolute;
top: 243px;
left: 0px;
width: 140px;
height: 468px;
background-color: transparent;
font-size: .8em;
color: navy;
text-align: center;

}

H1 { font-family: "Arial", sans-serif;
font-size: 1.4em;
color: #742E1A;
margin-left: 0em;
font-weight: bold;}

H2 { font-family: "Arial", sans-serif;
font-size: 0.9em;
color: #742E1A;
margin-left: 2em;
margin-right: 2em;
font-weight: bold;}

H3 { font-family: "Arial", sans-serif;
font-size: 0.9em;
color: 742E1A;
margin-left: 2em;
margin-right: 2em;
font-weight: bold;}

.menu { position: absolute;
font-family: "Arial", sans-serif;
top: 135px;
left: 20px;
height: 25px;
width: 714px;
z-index: 3;
font-size: 0.9em;
color: #000000;
margin-left: 0em;
font-weight: normal;
background-image: url("test7.jpg"); background-repeat: no-repeat}

.menu2 { position: absolute;
font-family: "Arial", sans-serif;
top: 425px;
left: 90px;
height: 34px;
width: 520px;
z-index: 3;
font-size: 0.9em;
color: #000000;
margin-left: 2em;
font-weight: normal;
}

.sound1 { position: absolute;
font-size: 0.8em;
font-family: "Arial", sans-serif;
top: 195px;
left: 90px;
height: 320px;
width: 420px;
z-index: 3;
font-size: 0.9em;
color: red;
margin-left: 2em;
background-color: transparent;
font-weight: normal;}

.sound1a { position: absolute;
font-size: 0.8em;
font-family: "Arial", sans-serif;
top: 170px;
left: 130px;
height: 360px;
width: 430px;
z-index: 3;
font-size: 0.9em;
color: red;
margin-left: 2em;
background-color: transparent;
font-weight: normal;
}


.text1 {position: absolute;
top: 472px;
left: 40px;
color: navy;
height: 420px;
width: 600px;
z-index: 3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 120%;
background-color: transparent;
overflow: hidden}

.text1main {position: absolute;
top: 422px;
left: 40px;
color: navy;
height: 420px;
width: 600px;
z-index: 3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 120%;
background-color: transparent;
overflow: hidden}

.text2 {position: absolute;
top: 342px;
left: 140px;
color: navy;
height: 420px;
width: 420px;
z-index: 3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 120%;
background-color: transparent;
overflow: hidden}

.copyr {position: absolute;
top: 650px;
left: 240px;
color: navy;
height: 20px;
width: 600px;
z-index: 3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 120%;
background-color: transparent;
overflow: hidden}

.image1 {position: absolute;
top: 158px;
left: 22px;
height: 139px;
width: 726px;
z-index: 1}

.ads1 {position: absolute;
top: 200px;
left: 552px;
height: 139px;
width: 110px;
z-index: 1}

.ads2 {position: absolute;
top: 500px;
left: 80px;
height: 90px;
width: 601px;
z-index: 1}

body {background-color: FF6F02}

body {background-image: url("test8.jpg"); background-repeat: no-repeat}
</style>
<script type="text/javascript">
// <![CDATA[
function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = 'selected';
li.onclick = function() {
this.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' hover';
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" hover\\b"), '');
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
if (lis[i]!= obj) {
lis[i].className='';
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className='selected';
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
obj.onclick = function() {
obj.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all &&!window.print)? null : setForm();
}
// ]]>
</script>
</head>

<body>

<table border=0>
<tr>
<td>
<div class="container">

<table border=0>
<tr>
<td><div class="drop">
<form action="#" method="post">
<fieldset>

<select id="something" name="something">
<option value="1">This is option 1</option>
<option value="/index1.html">This is option 2</option>
<option value="/index2.html">This is option 3</option>
<option value="/index3.html">This is option 4</option>
<option value="/index4.html" selected="selected">This is option 5</option>
<option value="/index5.html">This is option 6</option>
<option value="/index6.html">This is option 7</option>
<option value="/index7.html">This is option 8</option>

</fieldset></div></td><td><div class="drop2"><INPUT class="input"TYPE=Submit NAME="Submit"

VALUE="Go" onClick="JumpTo(this.form)"></select>
</form></div></td></tr></table>

</td>
</tr>
</table>
</body>
</html>

daveVk

12:42 am on Sep 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



change

<INPUT class="input"TYPE=Submit NAME="Submit" VALUE="Go" onClick="JumpTo(this.form)">

to

<INPUT class="input" TYPE="button" onClick="document.location.href=something.value">

or possibly ( you have not show JumpTo )

<INPUT class="input" TYPE="button" onClick="JumpTo(something.value)">

walrus

5:35 am on Sep 18, 2006 (gmt 0)

10+ Year Member



Tried it but no luck. Looks like i'll be going back to the
java sites to browse around. Thanks anyways, I suppose in a few years i'll be able to do it with just css, by that time i might know java :)

daveVk

6:46 am on Sep 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Perhaps I dont understand what you want. When you select "This is option 2" and press button do you wish to go to "/index1.html"? What is happening at the moment, and what do you what to happen on button press? Also </select> should be moved to just after last </option>. BTW CSS looks cool.

walrus

3:19 pm on Sep 18, 2006 (gmt 0)

10+ Year Member



Yes, onclick it should open the selected option but all it does now is refresh the page. I think the CSS is pretty cool too, wish i would have started learning it sooner.

walrus

5:06 pm on Sep 18, 2006 (gmt 0)

10+ Year Member



Thanks Dave! Besides the </select> and the onclick command you provided the only thing it needed was value="Submit".
It is totally customizable with images now, even the hover. I assigned a class to the button and I removed the feildset just in case i had the close in the wrong place. Can't thank you enough for the help, here is working code, at least for IE, going to check in FF now.

input.bstyle{
color:#050;
background: url(bar130t.jpg) no-repeat;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size:small;
font-weight:bold;
width: 130px;
height: 18px;
}

<form action="#" method="post">

<select id="something" name="something">
<option value="index1.html">This is option 1</option>
<option value="index2.html">This is option 2</option>
<option value="index3.html">This is option 3</option>
<option value="index4.html">This is option 4</option>
<option value="index5.html">This is option 5</option>
<option value="index6.html">This is option 6</option>
<option value="index7.html">This is option 7</option>
<option value="index8.html">notetoselfremovedfeildset</option>
</select>
</div> <div class="drop2">

<input type="button" value="Submit" class="bstyle" / onClick="document.location.href=something.value" ></div>
</form>

Thanks again!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:58 pm May 14, 2026