SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image onclick change drop down value

    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

  2. #2
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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.
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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>
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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.
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! My form only has id but no name:
    <form id="mainForm">

    How to make your code working?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by alouty View Post
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post

    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?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by alouty View Post
    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);
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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