Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript selection into form

    Hi,

    I am a newbie of Javascript so please excuse the question.

    I am looking for a javascript that when you click on an image the selection that you clicked on will appear in a text box forum.

    eg. if you click on 'map1.gif' the word 'europe' will appear in a text box below.

    I would greatly appreciate it if anyone could point me in the right direction.

    Kind Regards

    David

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, like many things, there are several ways to approach this. The easiest way would be to utilize the 'alt' attribute of the image. Like this....
    Code:
    <script>
    function showText(text) {
    document.forms[0].elements['output'].value = text;
    }
    </script>
    
    (...HTML...}
    
    <img src="map1.gif" alt="europe" onClick="showText(this.alt);" />
    
    <form>
    <input type="text" name="output" id="output" />
    </form>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    A flexible approach:

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">

    var Imagetext = Object;
    Imagetext['img1'] = 'Send Private Message'; //onclick text, indexed by image name
    Imagetext['img2'] = 'Do a Search';
    Imagetext['img3'] = 'Add to Buddy List';

    function setImageText() {
    for (img in Imagetext) document.images[img].text = Imagetext[img];
    }

    function showImageText() {
    document.f1.t1.value = this.text;
    }

    onload = setImageText;

    </script>
    </head>
    <body>
    <img name="img1" src="http://www.codingforums.com/images/sendpm.gif"
    onload="this.onmouseup=showImageText;">
    <img name="img2" src="http://www.codingforums.com/images/find.gif"
    onload="this.onmouseup=showImageText;">
    <img name="img3" src="http://www.codingforums.com/images/buddy.gif"
    onload="this.onmouseup=showImageText;">
    <form name="f1">
    <input type="text" name="t1">
    </form>
    </body>
    </html>

    The onmouseup is strictly for NS4 compatibility, which doesn't support onclick for images. Alter to suit.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •