Solved

How to use Images for Options in a <select>?

Posted on 2002-07-03
3
154 Views
Last Modified: 2013-12-24
I am wanting a customer to click an image rather than a drop down box for selction.

Form:"frmheelchoice" works fine for drop down text selection,

how ever Form:"frmheelchoice1" will display the images that I want, but if you click the image you want, it will not write to the "Cheel_type" variable, it will submit and call the next file and of course there is no value for "Cheel_type", this is needed to go on. Please help fix the Form:"frmheelchoice1".

<cfoutput>
<form name="frmheelchoice" action="#AHrefString_Root#showdetl.cfm#ID_STRING#&Product_ID=#CProduct_ID#</cfoutput>&event=toe&clear=1" METHOD="POST">
<input type="Hidden" name="stylepic" value="<cfoutput>#stylepic.stylepic#</cfoutput>">
<select name="Cheel_type">
<option value="0">Choose a Heel and press "Next"</option>
<CFOUTPUT query="heel">
<OPTION value="#heel_type#">#heel_descrip#</OPTION>
</CFOUTPUT>
</SELECT><br>
<input type = "button" value = "Next" onclick="checkselection();">
</form>
               
<form name="frmheelchoice1" action="<cfoutput>#AHrefString_Root#showdetl.cfm#ID_STRING#&Product_ID=#CProduct_ID#</cfoutput>&event=toe&clear=1" METHOD="POST">
<input type="Hidden" name="stylepic" value="<cfoutput>#stylepic.stylepic#</cfoutput>">
<CFloop query="heel">
<cfoutput><input type="Image" name="Cheel_type" value="#heel_type#" img src="..\images\#heel_type#.jpg" alt="#heel_descrip#" border="0" onClick="submit">
</CFOUTPUT>
</cfloop>
</form>
         
<script language="javascript">
function checkselection (){
     if (document.frmheelchoice.Cheel_type.value == "0")
          alert('Please select a Heel!');
      else document.frmheelchoice.submit();
}
</script>    
0
Comment
Question by:ww-wilbur
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
Yog earned 50 total points
ID: 7132451
image is not a form control, you may need to pass variables in querystring, method="get"

<script>
function doit(url, type){
var straction = url + "type=" + type
window.location.href=straction
}
</script>

<form name="frmheelchoice1" METHOD="get">
<input type="Hidden" name="stylepic" value="<cfoutput>#stylepic.stylepic#</cfoutput>">
<CFloop query="heel">
<cfoutput>
<img name="Cheel_type" src="..\images\#heel_type#.jpg" alt="#heel_descrip#" border="0" onClick="doit('#AHrefString_Root#showdetl.cfm#ID_STRING#&Product_ID=#CProduct_ID#&event=toe&clear=1','#heel_type#')">
</CFOUTPUT>
</cfloop>
</form>

in the next page, use #URL.Type# etc

OR you can use post method
Use a hidden button,
onclick go to the doit function
assign type value to hidden button, and dubmit

document.formname.hiddenbutton.value = type
document.formname.submit();

cheers.
0
 

Author Comment

by:ww-wilbur
ID: 7140681
This is what I finalyy came up with and used! Thanks Anyways. Rick
<cfoutput>
<form name="frmcolorchoice" action="#AHrefString_Root#showdetl.cfm#ID_STRING#&Product_ID=#color.Product_ID#</cfoutput>&event=heel&clear=1" METHOD="POST">
<input type="Hidden" name="stylepic" value="<cfoutput>#stylepic.stylepic#</cfoutput>">
<input type="hidden" name="CProduct_ID"value="0">
<CFloop query="colorswatch">
<cfoutput><input type="Image" img src="..\images\#color_v#.jpg" alt="#Color_vamp#" border="0" onCLICK="ImgSubmit('#Product_ID#');"> - <input type="Image" img src="..\images\#color_u#.jpg" alt="#Color_Upper#" border="0" onCLICK="ImgSubmit('#Product_ID#');"><br><!--- #productdescription1#-  --->#Colorswatch.Color_vamp# Vamp & #Colorswatch.Color_Upper# Shaft</cfoutput><br><br>
</cfloop>
</form>
<script language="JavaScript">
     function ImgSubmit(imgid){
     document.frmcolorchoice.CProduct_ID.value= imgid;
     document.frmcolorchoice.submit();
         
     }
</script>
0
 

Author Comment

by:ww-wilbur
ID: 7140686
This is what I used, all said and done! Thanks Rick
<cfoutput>
<form name="frmcolorchoice" action="#AHrefString_Root#showdetl.cfm#ID_STRING#&Product_ID=#color.Product_ID#</cfoutput>&event=heel&clear=1" METHOD="POST">
<input type="Hidden" name="stylepic" value="<cfoutput>#stylepic.stylepic#</cfoutput>">
<input type="hidden" name="CProduct_ID"value="0">
<CFloop query="colorswatch">
<cfoutput>
<input type="Image" img src="..\images\#color_v#.jpg" alt="#Color_vamp#" border="0" onCLICK="ImgSubmit('#Product_ID#');"> - <input type="Image" img src="..\images\#color_u#.jpg" alt="#Color_Upper#" border="0" onCLICK="ImgSubmit('#Product_ID#');"><br><!--- #productdescription1#-  --->#Colorswatch.Color_vamp# Vamp & #Colorswatch.Color_Upper# Shaft
</cfoutput>
</cfloop>
</form>

<script language="JavaScript">
     function ImgSubmit(imgid){
     document.frmcolorchoice.CProduct_ID.value= imgid;
     document.frmcolorchoice.submit();

     }
     </script>
0

Featured Post

Simple, centralized multimedia control

Watch and learn to see how ATEN provided an easy and effective way for three jointly-owned pubs to control the 60 televisions located across their three venues utilizing the ATEN Control System, Modular Matrix Switch and HDBaseT extenders.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question