Computing.Net > Forums > Web Development > Custom Radio Buttonns

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

Custom Radio Buttonns

Reply to Message Icon

Name: Tizian
Date: September 17, 2005 at 09:02:41 Pacific
OS: Windows XP
CPU/Ram: 512
Comment:

Is it by any means possible to make custom radio buttons on webpages?

You know like, i have 3 images, one for unchecked, one for checked, and one for when its clicked, and then you set up some javascript/php/html/css/dhtml whatever so that all radio buttons appear like the images.

Thanks in advance



Sponsored Link
Ads by Google

Response Number 1
Name: Michael J (by mjdamato)
Date: September 17, 2005 at 17:37:21 Pacific
Reply:

You can't use custom images for radio buttons. But, you can create some programming (JavaScript/DHTML) such that they act like radio buttons. And you could also program it so that it sets the value you want to pass.


0

Response Number 2
Name: Tizian
Date: September 19, 2005 at 06:47:51 Pacific
Reply:

Any idea how this would be done? sample script, link to tutorial would be very nice :)


0

Response Number 3
Name: Michael J (by mjdamato)
Date: September 19, 2005 at 09:54:09 Pacific
Reply:

It would not be entirely complex, but would take a little while to code. But, here are some ideas off the top of my head.

1. Use a hidden field to hold the value of the checked option (set the default value here if there will be one).

[input type="hidden" name="optVal" value="defaultVal"]

2. For each option use something like this below for the custom radio button image.

[img src="uncheckImg.jpg" onClick="setRadio(this.id,'thisOptionsValue')" id="opt0"]

3. Create the function setRadio() to change the custome radio button images and to set the hidden fields value.

function setRadio (fieldID,fieldVal) {
//Set all fields to unchecked
for (i=0; i<numberOfOptions ;i++) {
document.getElementById('opt'+i).image.src=uncheckImg.jpg;
}

//Sett the checked field img and value
document.getElementById(fieldID).image.src=checkImg.jpg;
document.forms[0].optVal.value = fieldVal;
}

This is all just off the top of my head. There might be some validations that you should include as well. Try to start the code and post back if you hit any snags. Use the Alert Me feature and I will be more likely to respond.

Michael J


0

Sponsored Link
Ads by Google
Reply to Message Icon

Related Posts

See More







Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: Custom Radio Buttonns

Custom Order Form www.computing.net/answers/webdevel/custom-order-form/426.html

custom shortcut for web page www.computing.net/answers/webdevel/custom-shortcut-for-web-page/3378.html

radio player like yahoo launchcast www.computing.net/answers/webdevel/radio-player-like-yahoo-launchcast/876.html