Question

I am using twitter bootstrap in my rails app, and I am constructing a form with multiple radio button inputs. In order to manage the form data, I have created a hidden field whose value is updated via Javascript.

Sample code below for any given input:

<div class="btn-group" data-toggle="buttons-radio">
          <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
          <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
        </div>
        <input type="hidden" id="ornamental_only" name="ornamental_only" value="">

Here is the Javascript to manage this event:

<script>
  var btns = ['ornamental_only_yes', 'ornamental_only_no'];
  var input = document.getElementById('ornamental_only');
  for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
      input.value = this.value;
    });
  }
</script>

My question: Is there a way to abstract the Javascript code in such a way as to apply to multiple radio button inputs simultaneously? (For instance, if I had 3 repetitions of the code block above with different id’s)

Answer 1

Let’s assume this is your HTML with multiple sets of buttons:

<div class="btn-group" id="btn_group_1" data-toggle="buttons-radio">
    <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
    <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_1" name="ornamental_only" value="">
<div class="btn-group" id="btn_group_2" data-toggle="buttons-radio">
    <button type="button" class="btn" id="awesome_only_yes" name="awesome_only" value="yes">Yes</button>
    <button type="button" class="btn" id="awesome_only_no" name="awesome_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_2" name="awesome_only" value="">

To dynamically listen for clicks on all button groups, you could do something like this (untested jQuery):

$('.btn-group .btn').on('click', function() {
    var parentID = $(this).parent().attr('id');
    $('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});

This just targets the hidden input fields based on the number at the end of the id.