I want to know if its possible to change the name of the input tag with javascript or jquery, for example in this code :

<input type="radio" name="some_name" value="">

I want to change the some_name value when user select this radio button.

the reason what i want to do this is described here : How might I calculate the sum of radio button values using jQuery?

I want to know if its possible to change the name of the input tag with javascript or jquery, for example in this code :

<input type="radio" name="some_name" value="">

I want to change the some_name value when user select this radio button.

the reason what i want to do this is described here : How might I calculate the sum of radio button values using jQuery?

• javascript
• jquery
• html

• 4 Just a heads-up: if you change the name of one radio button, you should change the names of all of them, or you'll likely end up submitting both names (and it'll probably screw with the browser UI as well). All of the jQuery examples given so far will do this for you. – Shog9 Commented Aug 24, 2009 at 20:37

6 Answers 6

Simply elem.name = "some other name" or elem.setAttribute("name", "some other name") where elem is the element you want to alter.

And to do that on selection, use the onchange event:

<input type="radio" name="some_name" value="" onchange="if(this.selected) this.name='some other name'">

And to apply that behavior to every radio button with that name:

var inputElems = document.getElementsByTagName("input");
for (var i=inputElems.length-1; i>=0; --i) {
    var elem = inputElems[i];
    if ((elem.type || "").toLowerCase() == "radio" && elem.name == "some_name") {
        elem.onchange = function() {
            if (this.selected) {
                this.name = "some other name";
            }
        };
    }
}

But using jQuery for that is quite easier.

The jQuery way

$('input:radio[name="some_name"]').attr('name', 'new name');

Gumbo has the vanilla JavaScript way covered

Yes, you can change the name of any element with javascript. Keep in mind though that IE 6 and 7 have trouble with submitted forms where the input elements have been tinkered with in javascript (not sure if this exact case would be affected).

$('input:radio[name="some_name"]').attr('name', 'new_name');

Edit: To change it only when it is selected, here is the code for that:

$("input:radio[name='some_name']").click(function() {
  if ($(this).attr('checked'))    $("input:radio[name='some_name']").attr('name', 'new_name');
  else                            $("input:radio[name='some_name']").attr('name', 'some_name');
});

Sure. If jQuery is your poison, this should do the trick:

$("input[name=some_name]").attr("name", "other_name");

I came up with this:

<input type="radio" name="some_name" value="" id="radios">

<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
    $("#radios").click(function()
    {
        $(this).attr("name", "other_name");
    });
});
</script>

Trying to change the name attribute of a radio button will cause strange, undesirable behavior in IE.

The best way to handle this is to replace the old radio button with a new one. This post may help you. If you are using jQuery, you can do it with the replaceWith function.

More information about changing name attributes in IE.