Toggle Functionality in Multipage Form

[SLB923]

Howdy folks and thanks in advance for taking the time to check out this post. My client would like a multipage form wherein users are able to select individual teeth as illustrated in the images I’ve linked to below. The first would be the raw form without any values selected and the second, with values selected:

Unselected State

https://picasaweb.google.com/lh/photo/iK6t70e6Lw_mBihxrURZCQ?feat=directlink

Selected State

https://picasaweb.google.com/lh/photo/giAX331xZjHSlhZ0PEyg4g?feat=directlink

Once a user has selected individual teeth the corresponding data needs to appear within the form submission summary that my client receives via email in the following manner:

“Tooth Chart Implants : 3, 8, 9, 16, 19, 27, 31” for each of the teeth selected. Users should also be able to reset their selections via a “Reset” button if they wish to start over.

Just wanted to know what you guys might suggest as the best way to go about achieving this? My client’s site is a Joomla! site just so you know what I’m working with. :)

Thanks again for any and all help!

Best,

Shane

[SLB923]

Hello? Anyone? Help?

[furrball1383]

sorry but it says the images don’t exist, so can’t see the example pics, maybe reupload em or try a site like tinypic instead?

[SLB923]

Yikes, forgot to enable public sharing for the photos! Here ya’ go!

Tooth Chart

Thanks so much for your taking a look furrball1383. ;)

Shane

[furrball1383]

ok after looking at it all you should be able to carry this out with some simple css html and javascript. I don’t know anything about getting reports back from forms so you’d have to have someone explain that to you and it probably involves ajax or php or something (out of my area of expertise) but I’ll explain the first part of the form to you. Basically you make each tooth a div and put all of them within another div. Create a sprite containing each tooth highlighten and clear. Then position the divs and give each a background image of the respective tooth. and have the css make it so that the position in the sprite is switched to have it on highlighted when the person clicks the tooth (just like a nav bar has image changes on hover, except you’ll want it onclick). Now that you have the basics of it, you’ll need to have each tooth with its own class and have another variable attached to it in your java script. Make it so that when a tooth is clicked the variable has its value changed. Now add a button that resets all the divs to their original positions in the sprite and resets their variable and voila. Now all you need to do is have a way or taking the divs that have had their variable for the clicked state, make it so the names of those divs are acquired and sent in the report that is produced. I hope this makes sense. If I have time tomorrow I might draw up a simple example in a jsfiddle except for the reporting part.

[SLB923]

Thanks so much for the detailed response, furrball1383! This is great! The site is built on Joomla! and I found a form component called BreezingForms that allows for the use of custom scripting so perhaps between both your suggestion above & the BreezingForms component I can put it all together into one form?

[Author]

Posts