Linking radio buttons and text inputs - html

Question

I am trying to associate a radio input with a specified text input. As you can see in the picture, there are two options. I know I can use for="" to associate the label to the radio input, but how can I also associate it to the text input underneath, and vise versa so when I focus on the text input, if focuses the correct radio button?
NOTE: The amount entered will be inserted into the database, so that's the most important part of this form. Currently if I click on $Off, I can still enter a number in %Off. I don't want this to happen, so the user does not get confused.
My markup:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
<script type="text/javascript">
$(function (){
$("form input[type=radio]").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest("form").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
</script>

Answer 1

You can't use a single <label> element to label two separate inputs. I would suggest associating the labels to the radio buttons, since the radio button is such a small click target and the label expands that target.
Choose one of the radios to be selected by default, perhaps "$ Off". Disable the other text field by default:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
Then use jQuery to do something like this:
$(function (){
$("#discount-dollars, #discount-percent").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest(".control-group").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
Basically, this listens for click events on both radio buttons. When you click one radio, it enables its associated text field (i.e., the text field with a CSS class name matching the value of the radio button) and disables the other text field. That way, you can't enter text into either text field unless its associated radio button is checked.

Answer 2

use image radio button with 2 states, selected and not selected, when you click the radio image just set focus to the textbox and swap to your selected radio image, and vice versa.

Answer 3

You cannot focus on two elements, it will be either the input text field or the radio button.
But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.
This can help you if you want to use jquery : http://api.jquery.com/val/ and http://api.jquery.com/focus/

Answer 4

This is a VERY rough sketch to help you out, but you could do something like this (giving you follow a certain naming convention):
<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>
<script>
function changeMe(inField) {
var fieldId = inField.id;
var type = fieldId.substring(0, 4);
if(type == 'text') {
var name = fieldId.substring(4);
var radioButton = document.getElementById("radio" + name);
radioButton.checked = true;
}else {
var name = fieldId.substring(5);
var textField = document.getElementById("text" + name);
textField.focus();
}
}
</script>

Answer 5

jQuery is what you want. Assuming your elements had IDs as follows:
$ radio button: money-radio
$ text box: money-text
% radio button: percent-radio
% text box: percent-text
...the code might look something like this. This will take care of disabling text boxes and focusing input properly.
<form>
<table>
<tr>
<td>
<input type="radio" id="money-radio" name="unit" value="money" />
<label for="money-radio">$ Off</label>
</td>
<td>
<input type="radio" id="percent-radio" name="unit" value="percent" />
<label for="percent-radio">% Off</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="money-text" name="money-off" />
</td>
<td>
<input type="text" id="percent-text" name="percent-off" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
$('#percent-radio, #money-radio').change(function() {
if ($('#percent-radio').val() == true) {
$('#percent-text').removeAttr('disabled').focus();
} else {
$('#percent-text').attr('disabled', 'disabled');
}
if ($('#money-radio').val() == true) {
$('#money-text').removeAttr('disabled').focus();
} else {
$('#money-text').attr('disabled', 'disabled');
}
}).change();
});
</script>