Rename form field name using Javascript

Question

Can I rename a field of my form using Javascript? Like changing:

<input type="text" name="chicken" id="chicken"/>

to

<input type="text" name="horse" id="horse"/>

What have you tried so far? Did you read any documents on DOM-manipulation? — Johannes Lumpe
– Johannes Lumpe, Commented May 13, 2013 at 11:39
How about removing and adding new element to the dom object. — Subir Kumar Sao
– Subir Kumar Sao, Commented May 13, 2013 at 11:39

VisioN · Accepted Answer · 2013-05-13 11:39:31Z

13

Of course it is possible:

var field = document.getElementById("chicken");
field.id = "horse";  // using element properties
field.setAttribute("name", "horse");  // using .setAttribute() method

answered May 13, 2013 at 11:39

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cregox Over a year ago

i don't think .id renames the object. apparently it changes the id.

Maen · Accepted Answer · 2019-11-26 17:46:54Z

10

You can change the name attribute, but in my opinion, you shouldn't change the id.

You can use :

document.getElementById("chicken").setAttribute('name', 'horse');

Edit

The following statement is purely subjective, and might not have some room on SO.

From W3.org :

The id attribute has several roles in HTML:

As a style sheet selector.

As a target anchor for hypertext links.

As a means to reference a particular element from a script.

As the name of a declared OBJECT element.

For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database,
translating HTML documents into other formats, etc.)

As I see it, the ID is an unique identifier which is really useful to retrieve an element from a script (among other things), and I personally want to be able to retrieve this single element with the same selector whatever manipulation it endures during runtime. So, I won't change it.

Example : if I transform a chicken into a horse, I keep in mind that it used to be a chicken before, and I'd rather remember it as a mutant which I'll select with $('#chicken[name=horse]'), and fake it as an horse using others CSS selectors.

edited Nov 26, 2019 at 17:46

answered May 13, 2013 at 11:40

Maen

10.7k3 gold badges47 silver badges71 bronze badges

2 Comments

Alnitak Over a year ago

It's perfectly possible to change the id of an element.

VisioN Over a year ago

You have a typo in the name of .setAttribute() method.

Agus · Accepted Answer · 2013-05-13 11:47:31Z

4

Yes, it possible to change any data at runtime using js :)

var elementToRename = document.getElementById("chicken");
elementToRename.id = "horse"; 
elementToRename.setAttribute("name","horse"); = "horse";

answered May 13, 2013 at 11:47

Agus

1,6242 gold badges23 silver badges48 bronze badges

Comments

Alnitak · Accepted Answer · 2013-05-13 11:42:17Z

2

Once you have access to the element object (i.e. with getElementById) you can just change its name property:

el.name = 'horse';

The attribute will mirror the value of the property.

answered May 13, 2013 at 11:42

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

user9779609 · Accepted Answer · 2018-06-15 08:18:49Z

how to rename a tab in JavaScript. Below is the code.

var i=parseInt(1);
        var clickid;
       $(document).ready(function(){
       	$("#demoTabs").tabs();
        $(".nav-tabs").on("click", "a", function(e){
        e.preventDefault();
      // $(this).tabs("show");
    })
    .on("click", ".close", function () {
    	var w_demo=$('#demoTabs').outerWidth();
        $(this).parent().remove();
        $("#demoTabs").width((w_demo-105)+"px");
	});
    $('.add-tab').click(function(e) {
        e.preventDefault();
        var html="<li class=\"tabs\" id="+i+"><a href=\"#\">New Tab</a><span class=\"close\">x</span></li>";
        $(this).closest('li').before(html);
		var w=$("#demoTabs").outerWidth();	
        var w=w+95;
        document.getElementById('demoTabs').style.width=w+"px";
        i=i+1;
	});
    if (document.getElementById('demoTabs').addEventListener) {
    document.getElementById('demoTabs').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
            clickid=$(this).id;
            prompt(this+" "+clickid);
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});
$("#refresh").click(function(){
    location.reload();
})
$("#rename").click(function(e){
var reply=prompt("type in a name for tab");
if(reply!=null && reply.trim().length>0)
{
     // $(e.target).prev("tabs").text(reply);
       // prompt(clickid);
      document.getElementByClass("").innerHTML=reply;
}
});
     });

   #body{
  height:22.8px;
  width:32.4px;
}
#demoTabs{ 
	width:90px;
    overflow: auto;
}
.nav-tabs > li > span {
    float:right;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}
.hide {
    display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
  cursor:pointer;
}

#rmenu ul {
  padding: 0;
  list-style: none;
  margin: 0;
}
#rmenu li{
    list-style: none; 
    padding-left: 5px; 
    padding-right: 5px; 
}

<body style="position:relative">
    <div id="demoTabs">
    <ul class="nav nav-tabs">
        <li class="tabs"><a href="#" class="add-tab">+Add</a></li>
    </ul></div>
    <div class="tab-content">
    </div>
    <div class="hide" id="rmenu">
        <ul>
            <li id="refresh">Refresh</li>
            <li id="rename">Rename</li>
        </ul>
    </div>

Collectives™ on Stack Overflow

Rename form field name using Javascript

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related