?
Solved

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

Posted on 2002-07-03
3
Medium Priority
?
159 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 100 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

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
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 …
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…

612 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