Hm... I'd've done it more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Radio Buttons to Text -- Demo</title>
<style type="text/css">
label {
display: block;
}
</style>
<script type="text/javascript">
function clearRadioButtons(frm, name) {
for(var i = 0, e = frm.elements[name], n = e.length; i < n; ++i)
e[i].checked = false;
}
function radioToText(frm, rdio, txt) {
var radioChangeHandler = function() {
if(this.checked) {
this.form.elements[txt].value = this.value;
break;
}
};
for(var i = 0, f = frm.elements, e = f[rdio], n = e.length; i < n; ++i)
e[i].onchange = radioChangeHandler;
f[txt].onchange = function() {
clearRadioButtons(this.form, rdio);
};
f = frm = e = null;
}
</script>
</head>
<body>
<form action="" id="some_form">
<div>
<input type="text" name="colour">
<label>
<input type="radio" name="colours" value="Red">
Red
</label>
<label>
<input type="radio" name="colours" value="Green">
Green
</label>
<label>
<input type="radio" name="colours" value="Blue">
Blue
</label>
</div>
</form>
<script type="text/javascript">
radioToText(document.getElementById("some_form"), "colours", "colour");
</script>
</body>
</html>That's somewhat more efficient, as well as being neater (none of those obtrusive onchange events, and using labels instead of abusing <br>).
But what's the best way of turning this into a php form so that details of colour choices can be sent to my email address?It's already a "PHP form" if by this you mean its results can be sent to a PHP script. A script to perform an action on form data is entirely separate from the form itself (which is just plain HTML); for the PHP to do this, you can use one of the many floating about the Web, or ask in our PHP forum if they don't suit you and we'll help you write your own.
EDIT: As an added gimmick,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Radio Buttons to Text -- Demo</title>
<style type="text/css">
label {
display: block;
}
</style>
<script type="text/javascript">
function clearRadioButtons(frm, name) {
for(var i = 0, e = frm.elements[name], n = e.length; i < n; ++i)
e[i].checked = false;
}
function radioToText(frm, rdio, txt) {
var radioChangeHandler = function() {
if(this.checked) {
var e = this.form.elements[txt];
e.value = e.style.backgroundColor = this.value;
break;
}
};
for(var i = 0, f = frm.elements, e = f[rdio], n = e.length; i < n; ++i)
e[i].onchange = radioChangeHandler;
f[txt].onchange = f[txt].onkeyup = function() {
clearRadioButtons(this.form, rdio);
this.style.backgroundColor = this.value;
};
f = frm = e = null;
}
</script>
</head>
<body>
<form action="" id="some_form">
<div>
<input type="text" name="colour">
<label>
<input type="radio" name="colours" value="Red">
Red
</label>
<label>
<input type="radio" name="colours" value="Green">
Green
</label>
<label>
<input type="radio" name="colours" value="Blue">
Blue
</label>
</div>
</form>
<script type="text/javascript">
radioToText(document.getElementById("some_form"), "colours", "colour");
</script>
</body>
</html>