Solved

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

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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

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

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
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…

777 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