Linking radio buttons and text inputs

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">
      &#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>

Postnasal

What language/technology is this? I know it at least involves HTML, but are there others involved? – Tasso

I think jQuery is a good solution, I'm just not the best at building functions yet. – Postnasal

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">
      &#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, 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.

Andalusia

But the OP mentioned they want it both ways. If you click a text field, it selects the radio button as well. – Ashford

@Ashford Oops. I missed that originally. But I feel like that makes the UI needlessly complex. What happens if I type something into both text fields? Which radio button is checked then? What if I type something into the "$ Off" text field but check the "% Off" radio button? This form becomes a lot more error-prone. – Andalusia

This is exactly what I'm looking for, but can't get it to work. I edited my original post with my markup. – Postnasal

currently what happens is the disabled radio stays disabled and the text input under it is still accessible. – Postnasal

You've disabled the radio button, not the text field. My code doesn't attempt to enable and disable the radio buttons, only the text fields. – Andalusia

@Andalusia sorry about that mistake. Eyes were crossed. I changed the disabled to the text input. However, the text boxes do not change the disabled state when I click between radios. I cut and pasted your jQuery. – Postnasal

If you're using my jQuery, you'll need to add the appropriate CSS class names ("dollars" or "percent") to the text inputs. That's how I'm determining which text field goes with which radio. I added some comments to my code. Does that clarify things? – Andalusia

@Andalusia Well it didn't work out like I thought. I updated my code above. I apologize for the noobness. Why is this not working out for me? – Postnasal

My script worked on your markup if I wrapped it in a <form> element. Are you using <form>? I assume you must be if you're submitting this data to the server. – Andalusia

Yes, it's wrapped in <form> and <fieldset> divs, along with other inputs. Not just those radio's and text inputs. No other inputs have the values, names or classes these do though. Here's the code. pastebin.com/9PfjefgL – Postnasal

I updated my answer to match your markup. Basically, you just need to be more specific in your selectors. I used the radio button IDs and the .control-group class name, and it seemed to work. – Andalusia

Answer 2

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/

Gavra

Answer 3

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.

Estaminet

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);"/> &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>

Ashford

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>

Tasso