Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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.
Media Temple is proud to announce our partnership with the Society of Digital Agencies (SoDA) as their exclusive hosting partner.
Free Data Recovery software is an advanced solution from Kernel Tools to recover data and files such as documents, emails, database, media and pictures, etc. It supports recovery from physical & logical drive after a hard disk crash, accidental/inte…
When you have multiple client accounts to manage, it often feels like there aren’t enough hours in the day. With too many applications to juggle, you can’t focus on your clients, much less your growing to-do list. But that doesn’t have to be the cas…

602 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