MouseOver and Onclick radiobox simulation

Simulate radio buttons with colors

[kajje]

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]

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]

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