Changing HTML on the fly

[David]

Hi, I have a webpage where I want to have a select list which the user
can select between two different pictures, and then the chosen picture
loads onto the html page, but without having to reload the actual page.

At the moment, what I have is a select list as shown below:

<form name="orders">
<select name="picture" size="1">
<option value="pic1.jpg">Picture 1</option>
<option value="pic2.jpg">Picture 2</option>
</select>
<input type="button" name="btnSubmit" value="Submit Form"
onClick="submitForm();"/>
</form>

What I want this to do, is to change the code of the applet used so
that it loads a different picture into the applet. THe code for the
applet is:

<applet name="Jigsaw" archive="Jigsaw.jar" codebase="/jar/"
code="Jigsaw.class" width="800" height="600">
<param name=Image value="/pictures/pic1.jpg">
<param name=ImgWidth value=500>
<param name=ImgHeight value=375>
<param name=Rows value=4>
<param name=Cols value=4>
<param name=DimHelpImage value=60>
<param name=AutoSnap value=9>
<param name=MessageText value="You solved it!">
</applet>

Then in the submit form, I don't know what to put to get it to change
the picture. I can read the value for the Image parameter by using:

function ActionDeterminator()
{
pic= document.applets[0].getElementsByTagName('param')[0].value;
}

But I don't know whether or how I can write a value from the select
list to the parameter. I can receive the value of the select list with
this code:

document.orders.picture.options[document.orders.picture.selectedIndex].value;

I was wondering if it would be best to create a html file for each
picture, and create the applet dependant for each picture (although
this is a lot of re-use of html for no reason), and put it in an iframe
on each page. But then again, I don't know how to change the url for
an iframe depending on which item was selected from a select list.

Hopefully someone can help with this

thanks in advance,

David

 

[Thomas 'PointedEars' Lahn]

[...]
<form name="orders">
<select name="picture" size="1">
<option value="pic1.jpg">Picture 1</option>
<option value="pic2.jpg">Picture 2</option>
</select>
<input type="button" name="btnSubmit" value="Submit Form"
onClick="submitForm();"/>
</form>

What I want this to do, is to change the code of the applet used so
that it loads a different picture into the applet. THe code for the
applet is:

<applet name="Jigsaw" archive="Jigsaw.jar" codebase="/jar/"
code="Jigsaw.class" width="800" height="600">
<param name=Image value="/pictures/pic1.jpg">
[...]
</applet>

Then in the submit form, I don't know what to put to get it to change
the picture. I can read the value for the Image parameter by using:

function ActionDeterminator()
{
pic= document.applets[0].getElementsByTagName('param')[0].value; ^^^^^^^^^^^^^^^^^^^^
}

It would make more sense to access properties of the public class of
the applet instead of using a possibly unsupported DOM Level 2 method.

But I don't know whether or how I can write a value from the select
list to the parameter. I can receive the value of the select list with
this code:

document.orders.picture.options[document.orders.picture.selectedIndex].value;

This is proprietary referencing; should be both standards compliant and
downwards compatible

... document.forms['orders'].elements['picture'].options[
document.forms['orders'].elements['picture'].selectedIndex].value ...

or

var oSelect = document.forms['orders'].elements['picture'];
... oSelect.options[oSelect.selectedIndex].value ...

Probably you are looking for this:

<form ...
onsubmit="var oSelect = this.elements['foo'];
... = oSelect.options[oSelect.selectedIndex].value;
return false;">
...

[...] But then again, I don't know how to change the url for
an iframe depending on which item was selected from a select list.

referenceToHTMLIFrameElementObject.src = selectedValue;

Please read the FAQ.


PointedEars