Linking radio buttons and text inputs

Question

I am trying to associate a radio input with a given text input. As you can see in the picture, there are two options. I know that I can use for="" to associate the label with the radio input, but how can I associate it with the text input below it, and vice versa, so when I focus on the text input if the correct switch focuses?

NOTE. The amount entered will be inserted into the database, so this is the most important part of this form. Currently, if I click on $ Off, I can still enter a number in% Off. I do not want this to happen, so the user is not 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"> &#36; 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"> &#37; 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 cannot use a single <label> element to indicate two separate inputs. I would suggest linking tags with switches, since the radio button is such a small target, and the shortcut extends that target.

Select one of the radio stations that will be selected by default, possibly "$ Off". Disable the other default text box:

 <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"> &#36; 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"> &#37; 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, it listens for click events on both switches. When you click on one radio, it turns on the associated text field (i.e., a Text field with a CSS class name that matches the switch value) and disables the other text field. Thus, you cannot enter text in a text field unless the corresponding associated radio button is set.

Answer 2

You cannot focus on two elements, it will either be an input text field or a switch. But you must use JavaScript or jQuery when you click on the switch to focus on the field below, or when you enter a value in the field below to check the switch above.

This can help you if you want to use jquery: http://api.jquery.com/val/ and http://api.jquery.com/focus/

Answer 3

use the image switch with 2 states, selected and not selected, when you click on the radio image, just set the focus to the text box and change to the selected radio image and vice versa.

Answer 4

This is a VERY rough sketch that will help you, but you can do something like this (letting you follow a specific naming convention):

 <input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/> <br /> <input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> &nbsp; <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. Suppose your elements had identifiers:

• $ radio button: money-radio
• $ text field: money-text
• % radio: percent radio
• % text field: percentage text

... the code might look something like this. This will take care to disable text fields and focus the input correctly.

 <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>