Solved

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

Posted on 2002-07-03
3
153 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
  • 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Server specifications for web hosting 7 93
IIS 8.5 2 52
Autoresponder for Whole Domain in Plesk/Cpanel 2 86
move expression web site to a new server 13 53
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

839 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