Easy question...but JS newbie is drawing a blank...

[Calan]

Let's say I have a standard form (input boxes, selects, etc). Next to a
Select called "someSelect", I need a link that says "Click here for more
info". The thing is, the link has different structures, based on the
selected value. One opens a small help window, the other opens a full-sized
page with header, etc.

If the value of someSelect is "value1", I want the following:

Click <a href="help_1.htm"
onClick="newwindow=window.open('help_1.htm','Help','width=450,height=400');
return false">here</a> for more info.

If the value of someSelect is "value2", I want the following:

Click <a href="help_2.asp" target = "_blank">here</a> for more info.

TIA!

--
Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"

 

[Calan]

I already have an onClick event for the select that changes a label
elsewhere on the form, like so:

<select size="1" name="someSelect" onClick="someLabel.innerText =
(this.value=='value1' ? 'Value 1:' : 'Value 2:')">
....
....
....


I still need this functionality also, so the previous would need to be added
to this.

Thanks again!

--
Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"

 

[Lasse Reichstein Nielsen]

Let's say I have a standard form (input boxes, selects, etc). Next to a
Select called "someSelect", I need a link that says "Click here for more
info". The thing is, the link has different structures, based on the
selected value. One opens a small help window, the other opens a full-sized
page with header, etc.

Why the big difference. Isn't there some sort of compromise that would
work for both?

What happens if Javascript is not available? Does the help link go to
a generic page that can give help for all the different select options?

If the value of someSelect is "value1", I want the following:

Click <a href="help_1.htm"
onClick="newwindow=window.open('help_1.htm','Help','width=450,height=400');
return false">here</a> for more info.

If the value of someSelect is "value2", I want the following:

Click <a href="help_2.asp" target = "_blank">here</a> for more info.

You cn change the properties of the link in the onselect handler for
the select,
---
var table = [["help_1.htm","Help",function(){
newwindow=window.open(this.href,this.target,
'width=450,height=400');return false;}],
["help_2.asp","_blank",undefined]];

function selectOnchange() {
var link = document.links['someLink']; // give it an id
var idx = this.selectedIndex;
link.href=table[idx][0];
link.target=table[idx][1];
link.onclick=table[idx][2];
}
---
or on the onclick of the link (using the same table):
---
function linkOnclick() {
var sel = document.forms['myForm'].elements['someSelect'];
var idx = sel.selectedIndex;
this.href = table[idx][0];
this.target = table[idx][1];
if (table[idx][3]) { // onclick handler
return table[idx][3]();
}
}

 

[Lasse Reichstein Nielsen]

I already have an onClick event for the select that changes a label
elsewhere on the form, like so:

<select size="1" name="someSelect" onClick="someLabel.innerText =
(this.value=='value1' ? 'Value 1:' : 'Value 2:')">

You use ".innerText", which seriously limits which browsers it will
work in (it is a proprietary IE property).

Anyway, it is not hard to add extra functionality to an HTML-specified
event handler. You just add it:

onclick="someLabel.innerText=(...);selectOnchange.call(this);"

/L

 

[Calan]

Thanks... I think I can figure that out...

What is the better solution for "innerText"? Forgot where I got that
suggestion from

Calan

Let's say I have a standard form (input boxes, selects, etc). Next to a
Select called "someSelect", I need a link that says "Click here for more
info". The thing is, the link has different structures, based on the
selected value. One opens a small help window, the other opens a full-sized
page with header, etc.

Why the big difference. Isn't there some sort of compromise that would
work for both?

What happens if Javascript is not available? Does the help link go to
a generic page that can give help for all the different select options?

If the value of someSelect is "value1", I want the following:

Click <a href="help_1.htm"
onClick="newwindow=window.open('help_1.htm','Help','width=450,height=400');
return false">here</a> for more info.

If the value of someSelect is "value2", I want the following:

Click <a href="help_2.asp" target = "_blank">here</a> for more info.

You cn change the properties of the link in the onselect handler for
the select,
---
var table = [["help_1.htm","Help",function(){
newwindow=window.open(this.href,this.target,
'width=450,height=400');return false;}],
["help_2.asp","_blank",undefined]];

function selectOnchange() {
var link = document.links['someLink']; // give it an id
var idx = this.selectedIndex;
link.href=table[idx][0];
link.target=table[idx][1];
link.onclick=table[idx][2];
}
---
or on the onclick of the link (using the same table):
---
function linkOnclick() {
var sel = document.forms['myForm'].elements['someSelect'];
var idx = sel.selectedIndex;
this.href = table[idx][0];
this.target = table[idx][1];
if (table[idx][3]) { // onclick handler
return table[idx][3]();
}
}

 

[Lasse Reichstein Nielsen]

What is the better solution for "innerText"? Forgot where I got that
suggestion from

Good question. That depends on which browsers you aim to support.

If you want to support Netscape 4 or Opera 6, then you need a
completely different approach, since they can't change the page
after it is loaded. Then you need both labels to be in the page to
begin with, and you just make one or the other invisible.

In later browsers, e.g., Mozilla, IE5, and Opera 7, you can use the
DOM methods.

You can either do it the hard way:
---
var elem = document.getElementById("labelId");
while (elem.hasChildNodes()) {
elem.removeChild(elem.lastChild);
}
elem.appendChild(document.createTextNode("new label text"));
---
or the simpler way:
---
var elem = document.getElementById("labelId");
if (elem.firstChild.nodeType == 3) { //text node
elem.firstChild.nodeValue = "new label text";
}
---
The simple way might need some extra checks to ensure that it
works.

To support IE4, you might actually have to use innerText (or perhaps
innerHTML, which is supported by Opera 7 and Mozilla too).

/L

 

[Calan]

What should the link defintion look like, since everything is being defined
in the script with the table values? I guessed at the following, but it
doesn't work...

Click <a id="helpLink">here</a> for more info.

--
Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"

Let's say I have a standard form (input boxes, selects, etc). Next to a
Select called "someSelect", I need a link that says "Click here for more
info". The thing is, the link has different structures, based on the
selected value. One opens a small help window, the other opens a full-sized
page with header, etc.

Why the big difference. Isn't there some sort of compromise that would
work for both?

What happens if Javascript is not available? Does the help link go to
a generic page that can give help for all the different select options?

If the value of someSelect is "value1", I want the following:

Click <a href="help_1.htm"
onClick="newwindow=window.open('help_1.htm','Help','width=450,height=400');
return false">here</a> for more info.

If the value of someSelect is "value2", I want the following:

Click <a href="help_2.asp" target = "_blank">here</a> for more info.

You cn change the properties of the link in the onselect handler for
the select,
---
var table = [["help_1.htm","Help",function(){
newwindow=window.open(this.href,this.target,
'width=450,height=400');return false;}],
["help_2.asp","_blank",undefined]];

function selectOnchange() {
var link = document.links['someLink']; // give it an id
var idx = this.selectedIndex;
link.href=table[idx][0];
link.target=table[idx][1];
link.onclick=table[idx][2];
}
---
or on the onclick of the link (using the same table):
---
function linkOnclick() {
var sel = document.forms['myForm'].elements['someSelect'];
var idx = sel.selectedIndex;
this.href = table[idx][0];
this.target = table[idx][1];
if (table[idx][3]) { // onclick handler
return table[idx][3]();
}
}

 

[Calan]

Using the first example:

You cn change the properties of the link in the onselect handler for
the select,
---
var table = [["help_1.htm","Help",function(){
newwindow=window.open(this.href,this.target,
'width=450,height=400');return false;}],
["help_2.asp","_blank",undefined]];

function selectOnchange() {
var link = document.links['someLink']; // give it an id
var idx = this.selectedIndex;
link.href=table[idx][0];
link.target=table[idx][1];
link.onclick=table[idx][2];
}

I am getting an error that "undefined" is null, and the link never changes.

This shouldn't be this difficult... lol

Calan

What should the link defintion look like, since everything is being defined
in the script with the table values? I guessed at the following, but it
doesn't work...

Click <a id="helpLink">here</a> for more info.

--
Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"

Why the big difference. Isn't there some sort of compromise that would
work for both?

What happens if Javascript is not available? Does the help link go to
a generic page that can give help for all the different select options?

onClick="newwindow=window.open('help_1.htm','Help','width=450,height=400');

return false">here</a> for more info.

If the value of someSelect is "value2", I want the following:

Click <a href="help_2.asp" target = "_blank">here</a> for more info.

You cn change the properties of the link in the onselect handler for
the select,
---
var table = [["help_1.htm","Help",function(){
newwindow=window.open(this.href,this.target,
'width=450,height=400');return false;}],
["help_2.asp","_blank",undefined]];

function selectOnchange() {
var link = document.links['someLink']; // give it an id
var idx = this.selectedIndex;
link.href=table[idx][0];
link.target=table[idx][1];
link.onclick=table[idx][2];
}
---
or on the onclick of the link (using the same table):
---
function linkOnclick() {
var sel = document.forms['myForm'].elements['someSelect'];
var idx = sel.selectedIndex;
this.href = table[idx][0];
this.target = table[idx][1];
if (table[idx][3]) { // onclick handler
return table[idx][3]();
}
}

 

[Lasse Reichstein Nielsen]

What should the link defintion look like, since everything is being defined
in the script with the table values? I guessed at the following, but it
doesn't work...

Click <a id="helpLink">here</a> for more info.

A link needs a href, so

You can get <a id="helpLink" href="genericHelp.html">more information</a>.

(Try to make the link text information, not just "here". It makes links
easier to scan, and helps people with disabilities.)

If you change "someLink" to "helpLink" in the script, it should work then.

Only it doesn't in IE. Bah. The problem seems to be the document.links
collection.
Change
var link = document.links['helpLink'];
to
var link = document.links.namedItem('helpLink');
in the script.

/L

 

[Calan]

Still a no go... now I'm getting object doesn't support this item or
property

I'm about ready to give up on this...lol

Calan

A link needs a href, so

You can get <a id="helpLink" href="genericHelp.html">more

(Try to make the link text information, not just "here". It makes links
easier to scan, and helps people with disabilities.)

If you change "someLink" to "helpLink" in the script, it should work then.

Only it doesn't in IE. Bah. The problem seems to be the document.links
collection.
Change
var link = document.links['helpLink'];
to
var link = document.links.namedItem('helpLink');
in the script.

/L

 

[Calan]

ok.. I'm close...

I changed

var link = document.links['helpLink'];

to

var link = document.links('helpLink'); with paranthesis vs. brackets.

---

The links work now, but I get an error that says not implemented on the
line:

link.onclick=table[idx][2];

and after the first time the links are selected, both windows open at the
small size.

Calan

Still a no go... now I'm getting object doesn't support this item or
property

I'm about ready to give up on this...lol

Calan

A link needs a href, so

You can get <a id="helpLink" href="genericHelp.html">more

(Try to make the link text information, not just "here". It makes links
easier to scan, and helps people with disabilities.)

If you change "someLink" to "helpLink" in the script, it should work then.

Only it doesn't in IE. Bah. The problem seems to be the document.links
collection.
Change
var link = document.links['helpLink'];
to
var link = document.links.namedItem('helpLink');
in the script.

/L

 

[Lasse Reichstein Nielsen]

Still a no go... now I'm getting object doesn't support this item or
property

Ok. Can you show us the page, either as a link or as a reduced version
that can be posted here (lines no longer than 72 chars)?

It's hard to do more without seeing the actual code.

/L

 

[Calan]

slight change of approach...

How about just popping up the small help window as soon as (and only if)
value2 is selected?

BTW - thanks for all this help!

Calan

 

[Calan]

Got it to work... thanks again for all the help!

--
Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"