CODEWITHSUNDEEP
javascriptjquery
Great Scott
Great Scott

Reputation: 1325

How to assign a different name for each radio input group

I'm looking for a solution to dynamically change the name for a group of input radio buttons.

I'm creating a travel itinerary where the user selects "domestic" or "international." That selection will hide/show the appropriate state/country dropdown below. There could be multiple destinations, therefore, I need multiple state/country selectors. The problem I'm running into is that all the inputs have the same name, so only one button will display as "checked" at any given time.

The code snippet will come in via an .ssi, so I can't just hard code the input name. I need a JavaScript/jQuery method of dynamically changing it as more destinations are added. The default is "destination." I'd like it to be "destination1," "destination2," etc. for each radio button group.

Here's a very watered-down version of the HTML (Not looking for a debate on table-based layouts. My team has already hashed that out):

<table>
  <tbody>
    <tr>
      <td colspan="2">
        <input type="radio" checked="checked" name="destination" class="js-trigger" data-destination="stateForm"> Domestic
        <input type="radio" name="destination" class="js-trigger" data-destination="countryForm"> International
      </td>
    </tr>
    <tr>
      <td>Destination:</td>
      <td>
        <form class="stateForm list">
          <select name="State" id="state-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
            <option value="Select State" selected="selected"></option>
            <option value="Alabama" data-alternative-spellings="AL">Alabama</option>
            <option value="Alaska" data-alternative-spellings="AK">Alaska</option>
            <option value="Etc" data-alternative-spellings="Etc">Etc</option>
          </select>
        </form><!-- End State Form -->
        <form class="countryForm list">
          <select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
            <option value="Select Country" selected="selected"></option>
            <option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
            <option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
            <option value="Etc" data-alternative-spellings="Etc">Etc</option>
          </select>
        </form><!-- End Country Form -->
      </td>
    </tr>
  </tbody>
</table>

Here's my fiddle: http://jsfiddle.net/Currell/9sr5rkjy/2/

I'm a bit of a JavaScript beginner, so forgive me if my process, terminology, or my code is a bit off.

Upvotes: 2

Views: 1126

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

You need to change them in groups (currently grouped in TDs):

$("td:has(':radio')").each(function(index){
    var $radio = $(this).find(':radio');
    $radio.attr("name", $radio.attr('name') + index);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/9sr5rkjy/5/

This will rename each set to name="destination0", name="destination1" etc.

You have duplicated ID fields too, which is invalid HTML, so you need to apply a similar fix to those. jQuery and Javascript can only find the first occurence of an ID as browsers use a fast lookup dictionary (with only one element stored against each ID value).

Upvotes: 1

j08691
j08691

Reputation: 207861

You could re-name them by adding this:

var counter = 0;
$('table').each(function(){
    $(this).find('input[type=radio]').attr('name','destination'+counter);
    counter++;
})

jsFiddle example

Update: I just noticed that all your select elements are duplicating name and ID attributes. To fix that you can change the code to:

var counter = 0;
$('table').each(function () {
    $(this).find('input[type=radio]').attr('name', 'destination' + counter);
    $(this).find('select').eq(0).attr({
        'name': 'State' + counter,
            'id': 'state-selector' + counter
    });
    $(this).find('select').eq(1).attr({
        'name': 'Country' + counter,
            'id': 'country-selector' + counter
    });
    counter++;
})

jsFiddle example

Upvotes: 1

Related Questions