3

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?

Community
  • 1
  • 1
datisdesign
  • 3,165
  • 8
  • 30
  • 29
  • 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 Aug 24 '09 at 20:37

6 Answers6

8

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.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
4

The jQuery way

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

Gumbo has the vanilla JavaScript way covered

Community
  • 1
  • 1
Russ Cam
  • 124,184
  • 33
  • 204
  • 266
2

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');
});
TJ L
  • 23,914
  • 7
  • 59
  • 77
  • Regarding your edit: it's probably a bad idea to change the name of a single radio button, unless there are no other radio buttons sharing that name (in which case, he should really be using a checkbox). – Shog9 Aug 24 '09 at 20:37
  • @shog9: Thanks for pointing that out, didn't think about it when I posted it. I updated it so it would change all the inputs with a name of `some_name` instead of just the one that was clicked. – TJ L Aug 24 '09 at 20:41
  • @shog9: Thanks again, jQuery isn't my main framework so I get some syntaxes mixed up all the time. – TJ L Aug 24 '09 at 20:54
  • Heh, the quotes are a good idea, but what i meant was, the last selector will select buttons with the name you intend to give them (select buttons with name=`some_name`, change name to `some_name`)! – Shog9 Aug 24 '09 at 21:04
1

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

$("input[name=some_name]").attr("name", "other_name");
Eugene Lazutkin
  • 43,776
  • 8
  • 49
  • 56
0

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>
MrHus
  • 32,888
  • 6
  • 31
  • 31
  • This will change the name of only a single radio button out of a group; this may be what he wants, but i can't imagine why. See my comments above... – Shog9 Aug 24 '09 at 20:40
0

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.

Community
  • 1
  • 1
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148