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="submit Form();"/>
</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.cl ass" 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=DimHelpIma ge value=60>
<param name=AutoSnap value=9>
<param name=MessageTex t 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 ActionDetermina tor()
{
pic= document.applet s[0].getElementsByT agName('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.option s[document.orders .picture.select edIndex].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]

Re: Changing HTML on the fly

David wrote:
[color=blue]
> [...]
> <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="submit Form();"/>
> </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.cl ass" 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 ActionDetermina tor()
> {
> pic= document.applet s[0].getElementsByT agName('param')[0].value;[/color]
^^^^^^^^^^^^^^^ ^^^^^[color=blue]
> }[/color]

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.
[color=blue]
> 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:
>
>[/color]
document.orders .picture.option s[document.orders .picture.select edIndex].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.selecte dIndex].value ...

Probably you are looking for this:

<form ...
onsubmit="var oSelect = this.elements['foo'];
... = oSelect.options[oSelect.selecte dIndex].value;
return false;">
...
</form>
[color=blue]
> [...] 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.[/color]

referenceToHTML IFrameElementOb ject.src = selectedValue;

Please read the FAQ.


PointedEars