image onclick change drop down value

**antonyx** · Mar 30, 2011 12:42

hello, i have a drop down menu called DDvehAttr

there are 7 values in this drop down (which is preloaded via backend) and the values are 1-7.

when the user clicks on an image i would like to alter the selected value in the DDvehAttr drop down with an onclick event.

there are 7 images in total and i would hope to do something like the following:

Code:

<img value="choice1" onclick="changevalue()" />
<img value="choice2" onclick="changevalue()" />

<script>
Function changevalue()
{
If choice1 selected THEN update DDvehAttr = 1
If choice2 selected THEN update DDvehAttr = 2
}
</script>

can anyone assist me with a straightforward script that achieves this outcome..

thank you

**tacodomains** · Mar 30, 2011 16:54

Here's an example I just wrote that should accomplish what you are trying to do. I picked up a function already available for setting the dropdown box value but had to modify it to use the form name. I tested this in IE8. Paste this code into a file and save as .html and you can then point to it in your browser to test:

Code:

<html>
	<head>
		<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("cboDropdown","frmMain",obj.value);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	function Select_Value_Set(SelectName,FormName,Value) {
	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  for(index = 0; 
	    index < SelectObject.length; 
	    index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
	   }
	}
			
		</script>		
	</head>
<body>
	
<img value="choice1" onclick="changevalue(this);" />
<img value="choice2" onclick="changevalue(this);" />

<form name="frmMain">
<select name="cboDropdown">
	<option value="choice1">Choice1</option>
	<option value="choice2">Choice2</option>
</select>
</form>

</body>
</html>

If you have any questions let me know.

**antonyx** · Mar 31, 2011 01:37

Hi that is brilliant, much appreciated. I tested it in IE and it works fine but does not seem to work in Firefox. Can you see any obvious reasons why?

Thanks

**antonyx** · Mar 31, 2011 04:26

Hello again, I have tried to implement the code into my form and am getting an error when I click on one of my images.

Here are 2 of my images:

Code:

<img value="1" onclick="changevalue(this);" />
<img value="2" onclick="changevalue(this);" />

here is the JavaScript in my <head>

Code:

<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("DDvehAttr","mainForm",obj.value);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	function Select_Value_Set(SelectName,FormName,Value) {
	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  for(index = 0; 
	    index < SelectObject.length; 
	    index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
		 
	   }
	}
			
		</script>

and here is my drop down menu which is within a form called mainForm

Code:

<select onKeyPress="return disableEnterKey(event)" id="DDvehAttr" class="FormField" onchange="DDvehAttrChanged(this)" >
              <option value="-1">Please Select . . .</option>
<%
              for (i=0; i < vehAttr.length; i++)
              {%>
              <option value="<% = i %>"><% = vehAttr[i] %></option>
              <%}
%>
            </select>

When I click on one of the images I get the following error.

Message: 'SelectObject.length' is null or not an object

Can you see why this is happening?

Thanks

**tacodomains** · Mar 31, 2011 07:49

Hi. It sounds like the evaluation

Code:

eval('SelectObject = document.' + FormName + '.' + SelectName + ';');

is not working in your file. My guess is maybe the FormName is not matching up or something. For whatever reason SelectObject is not getting set is what I'm thinking so nothing will work after that. I would put in this line of code right before the eval line to confirm if SelectObject is getting set properly:

Code:

alert(SelectObject);

If the alert shows null then the object is not getting set.

I didn't test my example in FireFox but apparently the problem is that "name" is not a valid attribute of the image tag. So if we instead use ID which is supported it will work in both FireFox and IE. Here's my revised code that works in both browsers:

Code:

<html>
	<head>
		<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("cboDropdown","frmMain",obj.id);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	function Select_Value_Set(SelectName,FormName,Value) {
	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  for(index = 0; index < SelectObject.length; index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
	   }
	}
			
		</script>		
	</head>
<body>
	
<img id="choice1" onclick="changevalue(this);" />
<img id="choice2" onclick="changevalue(this);" />

<form name="frmMain">
<select name="cboDropdown">
	<option value="choice1">Choice1</option>
	<option value="choice2">Choice2</option>
</select>
</form>

</body>
</html>

**antonyx** · Apr 7, 2011 02:29

Hi Taco, you are correct. When I use the alert it shows 'undefined'

I have no idea why this is happening because the form is definately called mainForm and the drop down is definately called DDvehAttr

Here is my code again, is there any reason why it cannot locate my drop down (aside from the names being incorrect?)

Code:

<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("DDvehAttr","mainForm",obj.id);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	function Select_Value_Set(SelectName,FormName,Value) {

	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  		 alert(SelectObject);

	  for(index = 0; index < SelectObject.length; index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
	   }
	}
			
		</script>

**tacodomains** · Apr 7, 2011 20:31

My code and HTML with your names plugged in works fine. Here is my updated code:

Code:

<html>
<head>
<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("DDvehAttr","mainForm",obj.id);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	function Select_Value_Set(SelectName,FormName,Value) {

	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  		 alert(SelectObject);

	  for(index = 0; index < SelectObject.length; index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
	   }
	}
			
		</script>
		
</head>
<body>

<img id="choice1" onclick="changevalue(this);" width="10" height="10"/>
<img id="choice2" onclick="changevalue(this);" width="10" height="10"/>

<form name="mainForm">
<select name="DDvehAttr">
	<option value="choice1">Choice1</option>
	<option value="choice2">Choice2</option>
</select>
</form>


</body>
</html>

I tested this in both IE and Chrome and it worked fine. If you want to post your HTML that contains the images and the dropdown box I will certainly be glad to take a look. If you don't want to post it you can PM it to me.

**alouty** · Nov 1, 2012 01:05

Hi! My form only has id but no name:
<form id="mainForm">

How to make your code working?

**paul_wilkins** · Nov 1, 2012 19:21

Originally Posted by alouty

Hi! My form only has id but no name:
<form id="mainForm">

How to make your code working?

I'd suggest that you scrap that old style code that's not working in your situation, and start again.

This code that I've come up with loops through each of the options, and uses the option value to attach an onclick event to the matching id attribute (on the image) to show that option.

Instead of using an inline HTML event attribute, this returned function will be attached to each image instead:

Code javascript:

function selectOption(option) {
    return function () {
        option.parentNode.selectedIndex = option.index;
    };        
}

Here's how that function is added to each image - by looping through each option of the select element.

Code javascript:

var form = document.getElementById('mainForm'),
    select = form.elements.DDvehAttr,
    option,
    i;
for (i = 0; i < select.options.length; i += 1) {
    option = select.options[i];
    document.getElementById(option.value).onclick = selectOption(option);
}

Some test code that demonstrates this can be found at http://jsfiddle.net/pmw57/MFZnp/
Note: Ensure that your script is at the end of the body, just before the </body> tag

**alouty** · Nov 1, 2012 21:32

Originally Posted by paul_wilkins

Code javascript:

function selectOption(option) {
    return function () {
        option.parentNode.selectedIndex = option.index;
    };        
}

Here's how that function is added to each image - by looping through each option of the select element.

Code javascript:

var form = document.getElementById('mainForm'),
    select = form.elements.DDvehAttr,
    option,
    i;
for (i = 0; i < select.options.length; i += 1) {
    option = select.options[i];
    document.getElementById(option.value).onclick = selectOption(option);
}

Hi! Thanks for the reply.
My options included <option value="">Select Job Theme ID</option>. It will make the onclick nonfunctional.

I can't delete it since it is using by other fieldnames too.
Do you have any other advise?

**paul_wilkins** · Nov 1, 2012 21:55

Originally Posted by alouty

Hi! Thanks for the reply.
My options included <option value="">Select Job Theme ID</option>. It will make the onclick nonfunctional.

I can't delete it since it is using by other fieldnames too.
Do you have any other advise?

Yes indeed, we can use a variable, and guard against situations where no element can be found.

Code javascript:

var form = document.getElementById('mainForm'),
    select = form.elements.DDvehAttr,
    option,
    el,
    i;
for (i = 0; i < select.options.length; i += 1) {
    option = select.options[i];
    el = document.getElementById(option.value);
    if (el) {
        el.onclick = selectOption(option);
    }
}

User Tag List

Thread: image onclick change drop down value

Thread Tools

Display

image onclick change drop down value

Bookmarks

Bookmarks

Posting Permissions