View Full Version : Onclick Events?

05-17-2012, 07:36 PM
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:confused:

Thanks for any help with this


05-17-2012, 07:49 PM
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.

05-17-2012, 08:35 PM
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.

05-17-2012, 09:42 PM
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">
<td width="74">&nbsp;</td>
<td width="220">&nbsp;</td>
<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="">
<input type="text" name="pcid" id="pcid" />

Thanks for your help, i really appreciate it.

05-17-2012, 10:01 PM
it's a fairly low-rent way of doing it, but if you are only doing this for one image, you can do this:

<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

05-18-2012, 06:04 AM
If you have multiple images with multiple products, this might be a way to go...

<title> Product Selection </title>
<script type="text/javascript">

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
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;

<style type="text/css">

<form name="myForm" action="" method="post" onsubmit="return false">
Product: <input type="text" id="pcid" value="">
<div id="imageSection"></div>

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.

05-19-2012, 01:42 AM
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


05-19-2012, 05:18 AM
You're most welcome, I'm sure, from both of us.
Happy to help.
Good Luck!