Changing HTML on the fly

Discussion in 'Javascript' started by David, May 27, 2005.

  1. David

    David Guest

    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
     
    David, May 27, 2005
    #1
    1. Advertising

  2. David wrote:

    > [...]
    > <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;">
    ...
    </form>

    > [...] 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
     
    Thomas 'PointedEars' Lahn, Jun 3, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ian

    Ideas for changing CSS on fly?

    Ian, Jun 19, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    389
    clintonG
    Jun 19, 2004
  2. Phil Winstanley [Microsoft MVP ASP.NET]

    Re: Ideas for changing CSS on fly?

    Phil Winstanley [Microsoft MVP ASP.NET], Jun 19, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    423
    clintonG
    Jun 20, 2004
  3. RCS
    Replies:
    1
    Views:
    321
    Peter Morris [Droopy eyes software]
    Mar 31, 2005
  4. RCS
    Replies:
    2
    Views:
    424
  5. Brian

    Fly outmenu on the fly

    Brian, Apr 8, 2005, in forum: Javascript
    Replies:
    0
    Views:
    127
    Brian
    Apr 8, 2005
Loading...

Share This Page