homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
MouseOver and Onclick radiobox simulation
Simulate radio buttons with colors
kajje




msg:4056389
 1:09 am on Jan 8, 2010 (gmt 0)

I would like to simulate radio button functionality, but without radio buttons.

<table border=0>
<tr>
<td OnMouseOver="this.style.backgroundColor='green';" onMouseOut="this.style.backgroundColor='#FFFFFF';">MONEY COMING IN</td>
<td onMouseOver="this.style.backgroundColor='red';" onMouseOut="this.style.backgroundColor='#FFFFFF';">MONEY GOING OUT</td>
</tr>
</table>

When I click MONEY-IN, the MONEY-IN should become and remain green, till I submit the form, or till I click MONEY-OUT. If I click MONEY-OUT, the background of MONEY-IN should be resetted, and MONEY-OUT should become red.

The initial state should be both white.

When I submit the form, I would like to be able to see the state of my fake radio buttons of course.

Additionaly it would be nice to get always an inverted background when I do a MouseOver. So the unselected MONEY-OUT will become red on a MouseOver, the selected MONEY-OUT will become white on a MouseOver.

 

whoisgregg




msg:4083169
 10:17 pm on Feb 18, 2010 (gmt 0)

Welcome to WebmasterWorld, kajje!

When I simulate form actions using non-form elements, I usually setup a hidden element to contain the actual value. That makes it available when the form is submitted.

In this case, you could do something like:

function toggleMoney(choice){
if(choice == 'in'){
document.getElementById('moneyIn').style.backgroundColor='green';
document.getElementById('moneyOut').style.backgroundColor='#ffffff';
} else {
document.getElementById('moneyIn').style.backgroundColor='#ffffff';
document.getElementById('moneyOut').style.backgroundColor='green';
}
document.getElementById('moneyChoice').value = choice;
}


And then refactor your html like so:

<input type="hidden" name="moneyChoice" id="moneyChoice" value="" />
<table border=0>
<tr>
<td id="moneyIn" onclick="toggleMoney('in');">MONEY COMING IN</td>
<td id="moneyOut" onclick="toggleMoney('out');">MONEY GOING OUT</td>
</tr>
</table>

kajje




msg:4083311
 4:12 am on Feb 19, 2010 (gmt 0)

Thanks Gregg,

Not only for giving me the solution but also for the small variable container 'detour'.

Your approach was a little different on my various attempts, but it makes much much more sense like this!

The fool-proof wizard for staff inputs on our intranet gets a lot more visual with this one!

Cheers
Kajje

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved