URGENT ! DHTML Page Nesting

mishchenko · Apr 1, 2001

Here's what I would like to do:

1) Start with the script located at

http://www.wsabstract.com/javatutors/dynamiccontent5.shtml

2) Change it from a rotation script to an input-based script >>> the dynamic part should change depending on a visitor's selection in a <SELECT> box.

3) Have the script call up external .html files as opposed to including all of the dynamic pages' HTML code in the script itself.

Is this possible ?? Can someone help me out with this ??

mishchenko · Apr 1, 2001

I forgot to mention that there's more info on EXACTLY & PRECISELY what I'm trying to acheive here :

http://freewarejava.com/ubb/Forum1/HTML/013842.html

http://freewarejava.com/ubb/Forum3/HTML/003166.html

http://freewarejava.com/ubb/Forum5/HTML/001453.html

Thanks in advance.

gsc1ugs · Apr 3, 2001

Get sorted?

mishchenko · Apr 3, 2001

what ??!!

gsc1ugs · Apr 3, 2001

DID YOU GET IT SORTED?

mishchenko · Apr 3, 2001

what should i have gotten sorted ??
if you're asking if i sorted out the problem or of i found a solution, then no.

Andriy.

gsc1ugs · Apr 3, 2001

This anygood to you...?
<html>
<head>
<script>

function select1(selection)
{
document.FormSelect.SelectTwo.options[selection].selected = "true"
}

function select2(selection)
{
document.FormSelect.SelectOne.options[selection].selected = "true"
}

</script>
</head>
<body>

<form name="FormSelect">

<select name="SelectOne" class="forms" onChange="select1(this.selectedIndex)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select name="SelectTwo" class="forms" onChange="select2(this.selectedIndex)">
<option>Selection one</option>
<option>Selection two</option>
<option>Selection three</option>
<option>Selection four</option>
</select>

</form>
</body>
</html>

mishchenko · Apr 3, 2001

It's close but not there.
The point is for the *HTML content* to the right of the first <SELECT> dropdown change with the choices, not just for a new <SELECT> element to appear.

Can you do that ??

gsc1ugs · Apr 3, 2001

Is this what your after

http://www2.autotrader.co.uk/buyersguidenew/carmenu.asp

mishchenko · Apr 3, 2001

Kind of. This takes you to a different page upon selection. I would like something that changes part of the same page upon selection.

See the beginning of this post for *precisely* what I'm trying to do (with illustrations):

http://freewarejava.com/ubb/Forum1/HTML/013842.html

Thx. Andriy.

gsc1ugs · Apr 4, 2001

Ok what about this
<html>
<head>
</head>

<body>
<script language='Javascript'>make= new Array();
label= new Array();
make[0]= new Array();
make[0][0]='59';
label[0]= new Array();
label[0][0]='ALFA ROMEO';
make[0][1]='331';
label[0][1]='146 HATCHBACK';
make[0][2]='181';
label[0][2]='156 SALOON';
make[0][3]='185';
label[0][3]='SPIDER CONVERTIBLE';
make[1]= new Array();
make[1][0]='58';
label[1]= new Array();
label[1][0]='AUDI';
make[1][1]='174';
label[1][1]='A3 HATCHBACK';
make[1][2]='186';
label[1][2]='A8 SALOON';
make[2]= new Array();
make[2][0]='39';
label[2]= new Array();
label[2][0]='BMW';
make[2][1]='89';
label[2][1]='3 SERIES SALOON';
make[2][2]='92';
label[2][2]='5 SERIES SALOON';
make[2][3]='530';
label[2][3]='5 SERIES TOURING';
make[2][4]='519';
label[2][4]='7 SERIES SALOON';
make[2][5]='151';
label[2][5]='Z3 ROADSTER';
</script>

<script language="javascript">
<!--
function dropsubmission(){
var oForm = document.frmModel
if (oForm.lstModel.options[oForm.lstModel.selectedIndex].value != "0&quot

{
//alert(oForm.lstModel.options[oForm.lstModel.selectedIndex].value);
oForm.submit();

}
}

function change(index)
{
if (index == -1)
{
document.frmModel.lstModel.length=0;

//Blanks were added to handle a Netscape 4.7 compatibility issue
document.frmModel.lstModel.options[0] = new Option("-- Select Model --",0);

document.frmModel.lstModel.disabled = true
document.frmModel.lstModel.selectedIndex = 0;
return
}

document.frmModel.lstModel.disabled = false

len=document.frmModel.lstModel.length;

for (Col=len;Col>0;Col--)
{
document.frmModel.lstModel.options[Col-1]=null;
}

len = make[index].length;

document.frmModel.lstModel.length = 0;

document.frmModel.lstModel.options[0] = new Option("-- Select Model --",0);

for(Col=1;Col<len;Col++)
{
document.frmModel.lstModel.options[Col] = new Option(label[index][Col],make[index][Col]);

}

document.frmModel.lstModel.selectedIndex = 0
}

//-->
</script>
<form method="POST" name="frmModel" action="yourhandler.asp">
<select name="lstMake" onChange="change(document.frmModel.lstMake.selectedIndex -1)">
<script language="Javascript">
document.write('<option value="0">-- Select Make --</option>')
for (intcounter = 0; intcounter < make.length;intcounter++)
{
document.write('<option value="'+make[intcounter][0] + '">' + label[intcounter][0])
}
</script>
</select>
<select name="lstModel" Onchange="Javascript:dropsubmission();" disabled>
<script language="Javascript">
//Blanks were added to handle a Netscape 4.7 compatibility issue
document.write('<option value="0">-- Select Model --</option>')
document.write('<option value="0"></option>')
document.write('<option value="0"></option>')
document.write('<option value="0"></option>')
document.write('<option value="0"></option>')
</script>
</select>
</form>
</body>
</html>

mishchenko · Apr 4, 2001

This one doesn't fit in either.

I DON'T need two <SELECT> boxes, just one.
When a visitor chooses something in that single <SELECT> box, the *HTML content* (e.g. text, images, etc.) to the right of that <SELECT> box should change.

Andriy.

gsc1ugs · Apr 4, 2001

Well with what i've sent i'm sure you can put something together.

mishchenko · Apr 4, 2001

No, you don't understand. Both of the scripts you posted are essentially the same and don't fit what I'm trying to do.

gsc1ugs · Apr 4, 2001

leave it with me...

aperfectcircle · Apr 5, 2001

Code:

<html>
<head>
<title>Dynamic Test</title>
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>
<!--
function complete() {
if (document.form.type.selectedIndex == 0) {
ext0 = 'You have selected:'
	+ '<br />'
	+ 'option 0'
document.getElementById('output').innerHTML = ext0
}
if (document.form.type.selectedIndex == 1) {
ext1 = 'You have selected:'
	+ '<br />'
	+ 'option 1'
document.getElementById('output').innerHTML = ext1
}
if (document.form.type.selectedIndex == 2) {
ext2 = 'You have selected:'
	+ '<br />'
	+ 'option 2'
document.getElementById('output').innerHTML = ext2
}
if (document.form.type.selectedIndex == 3) {
ext3 = 'You have selected:'
	+ '<br />'
	+ 'option 3'
document.getElementById('output').innerHTML = ext3
}
}
//-->
</script>
</head>
<body>
<form name=&quot;form&quot;>
<table>
<tr>
 <td valign=&quot;top&quot;>
 <select name=&quot;type&quot; onchange=&quot;complete()&quot;>
  <option>Option 0</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
 </select>
 </td>
 <td valign=&quot;top&quot;>
 <div id=&quot;output&quot;></div>
 </td>
</tr>
</table>
</form>
</body>
</html>

That should do what you want. It'll only work in IE and N6 though...

mishchenko · Apr 5, 2001

WOW !

That's great.

How can I move the "You have selected: option #" text strings into outside files (e.g. each dynamic piece of HTML would be called up from an external HTML file) ??

In addition, I bet this script could somehow be made to work with IE, NS4, and NS6 (see

http://www.wsabstract.com/javatutors/dynamiccontent5.shtml

-- it can be done through a combination of <div>, <layer>, and <ilayer> tags).

Do you think that's feasible ??

gsc1ugs · Apr 5, 2001

Just going to do that honest!!

aperfectcircle · Apr 5, 2001

I'm not sure about moving the dynamic HTML to an external file... I've never done that before.

Right now I'm working on getting it to work in Netscape 4, but I'm not really sure where to start. It'll probably have to be done with layers somehow, but since I haven't worked with Netscape 4 layers before it'll probably take a while.
Anyone know how to do this?

aperfectcircle · Apr 5, 2001

Actually, you could include that dynamic content in an external js file.
Just call the file in the heading (<script src="xxx.js"></script>)
And then put the variables and their values in that external file.

Make sense?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

URGENT ! DHTML Page Nesting

MIS

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

Programmer

MIS

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor