Image onclick change drop down value

antonyx · March 30, 2011, 6:42pm

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:


<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 · March 30, 2011, 10:54pm

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:


<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 · March 31, 2011, 7:37am

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 · March 31, 2011, 10:26am

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:


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

here is the JavaScript in my <head>


<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


<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 · March 31, 2011, 1:49pm

Hi. It sounds like the evaluation

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:


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:


<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 · April 7, 2011, 9:29am

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?)


<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 · April 8, 2011, 3:31am

My code and HTML with your names plugged in works fine. Here is my updated 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 · November 1, 2012, 7:05am

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

How to make your code working?

Paul_Wilkins · November 2, 2012, 1:21am

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:


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.


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 · November 2, 2012, 3:32am

paul_wilkins:


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.


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 · November 2, 2012, 3:55am

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


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);
    }
}