CODEWITHSUNDEEP
javascriptjqueryhtml
datisdesign
datisdesign

Reputation: 3195

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

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?

Upvotes: 3

Views: 16056

Answers (6)

Gumbo
Gumbo

Reputation: 655239

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.

Upvotes: 8

Elias Zamaria
Elias Zamaria

Reputation: 101073

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.

Upvotes: 0

TJ L
TJ L

Reputation: 24452

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

Upvotes: 2

MrHus
MrHus

Reputation: 33378

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>

Upvotes: 0

Eugene Lazutkin
Eugene Lazutkin

Reputation: 43956

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

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

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125488

The jQuery way

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

Gumbo has the vanilla JavaScript way covered

Upvotes: 4

Related Questions