can the name of a input tag be changed with javascript ?

Question

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 : http://stackoverflow.com/questions/1324703/calculation-radio-buttons-values-in-jquery

Answer 1

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.

Answer 2

The jQuery way

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

Gumbo has the vanilla JavaScript way covered

Answer 3

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');
});

Answer 4

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

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

Answer 5

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>

Answer 6

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.