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 8 of 8

Thread: Onclick Events?

  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onclick Events?

    Hi Guys

    I have been trying to implement a way of using `onclick` to fill out a form field, with a Value assigned by a clickable rollover image.

    So i have a image rollover of a PC, i give the PC a Value? ID? of `PC No34`
    When the image is clicked it updates its Value of PC No34 to a Form text field which is named `pcid` the Form is on the same page as the PC rollover image. I have been trying most of the day but not getting it. Pls help

    Thanks for any help with this

    Willo

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    as far as I know an image cannot have a value, so you would be better off using the image's ID attribute. You can then pass the ID through the onclick using this.id to a function that fills in the form field

    if you have multiple categories of images to fill in multiple form fields it may get trickier, but not much. feel free to post your html if you are still stuck.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 505 Times in 499 Posts
    As an alternative solution:
    You could assign the value to the 'alt=???' attribute of the <img> tag.
    Then assign the 'alt' value to the form field you wish when the 'onclick' event occurs.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys

    Thanks for jumping in fast with help, i have been trying all day. Its my 1st time with javascript and im trying hard and getting no where fast. Heres what i got, probs totally wrong.

    <table width="300" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td width="74">&nbsp;</td>
    <td width="220">&nbsp;</td>
    </tr>
    <tr>
    <td><a href="#"onclick="javascript:document.getElementById('PC34').value='test'" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image','','images/PC1_Roll.jpg',1)"><img src="images/PC1.jpg" name="image" width="25" height="25" border="0" id="image" /></a></td>
    <td><form id="form1" name="form" method="post" action="">
    <label>pcid
    <input type="text" name="pcid" id="pcid" />
    </label>
    </form></td>
    </tr>
    </table>

    Thanks for your help, i really appreciate it.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    it's a fairly low-rent way of doing it, but if you are only doing this for one image, you can do this:
    Code:
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image','','images/PC1_Roll.jpg',1)"><img src="images/PC1.jpg" name="image" width="25" height="25" border="0" id="PC34" onclick="document.getElementById('pcid').value=this.id; return false"/></a></td>
    but like I said... if there are multiple images and multiple form fields, better to pass the relevant details to a function

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb One, of many, possible solutions...

    If you have multiple images with multiple products, this might be a way to go...
    Code:
    <html>
    <head>
    <title> Product Selection </title>
    <script type="text/javascript">
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
       '11.jpg|Exhausted','12.jpg|Confused','13.jpg|Ecstatic','14.jpg|Guilty','15.jpg|Suspicious',
       '21.jpg|Angry','22.jpg|Hysterical','23.jpg|Frustrated','24.jpg|Sad','25.jpg|Confident',
       '31.jpg|Embarrased','32.jpg|Happy','33.jpg|Mischevious','34.jpg|Disgusted','35.jpg|Frightened',
    ];
    function setPCID(info) {
      document.getElementById('pcid').value = info.alt;
    }
    window.onload = function() {
      var str = '';
      var tmp = [];;
      for (var i=0; i<imgList.length; i++) {
        tmp = imgList[i].split('|');
        if (i % 5 == 0) { str += '<br>'; }
        str += '<img src="'+baseURL+tmp[0]+'" alt="'+tmp[1]+'" onclick="setPCID(this)">';
      }
      document.getElementById('imageSection').innerHTML = str;
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <form name="myForm" action="" method="post" onsubmit="return false">
    Product: <input type="text" id="pcid" value="">
    <div id="imageSection"></div>
    </form>
    </body>
    </html>
    Above code only activates the onclick event using the alt value of the image.

    Given the images and product numbers, you could easily add the onmouseover events.

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow guys

    Thankyou so much, the code you gave worked. And also answered a few other questions i had at the same time. So glad i joined this Forum, i can feel im gonna learn alot here.

    Once again Thankyou to you both

    Willo

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 505 Times in 499 Posts
    You're most welcome, I'm sure, from both of us.
    Happy to help.
    Good Luck!


  •  

    Tags for this Thread

    Posting Permissions

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