Welcome to WebmasterWorld Guest from 54.167.5.15

Forum Moderators: open

Message Too Old, No Replies

MouseOver and Onclick radiobox simulation

Simulate radio buttons with colors

     

kajje

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

5+ Year Member



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

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

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month