使用 Javascript 重命名表单字段名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16521109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rename form field name using Javascript
提问by Alex
Can I rename a field of my form using Javascript? Like changing:
我可以使用 Javascript 重命名表单的字段吗？喜欢改变：
<input type="text" name="chicken" id="chicken"/>
to
到
<input type="text" name="horse" id="horse"/>
回答by VisioN
Of course it is possible:
当然有可能：
var field = document.getElementById("chicken");
field.id = "horse"; // using element properties
field.setAttribute("name", "horse"); // using .setAttribute() method
回答by Bigood
You can change the nameattribute, but in my opinion, you shouldn't change the id.
您可以更改name属性，但在我看来，您不应该更改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.
以下陈述纯粹是主观的，可能没有关于 SO 的一些空间。
From W3.org:
来自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.)
id 属性在 HTML 中有几个作用：
- 作为样式表选择器。
- 作为超文本链接的目标锚点。
- 作为从脚本中引用特定元素的一种方式。
- 作为已声明的 OBJECT 元素的名称。
- 用于用户代理的通用处理（例如，在从 HTML 页面提取数据到数据库中时识别字段，
将 HTML 文档转换为其他格式等）
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.
在我看来，ID 是一个唯一标识符，它对于从脚本中检索元素（除其他外）非常有用，我个人希望能够使用相同的选择器检索这个单个元素，无论它在运行时经受什么操作. 所以，我不会改变它。
Example: if I transform a chickeninto a horse, I keep in mind that it used to be a chickenbefore, and I'd rather remember it as a mutant which I'll select with $('#chicken[name=horse]'), and fake it as an horseusing others CSS selectors.
示例：如果我将一只鸡变成一匹马，我会记住它以前曾经是一只鸡，我宁愿将它记住为我将选择的突变体$('#chicken[name=horse]')，并使用其他 CSS将其伪装成一匹马选择器。
回答by Agus
Yes, it possible to change any data at runtime using js :)
是的，可以在运行时使用 js 更改任何数据:)
var elementToRename = document.getElementById("chicken");
elementToRename.id = "horse";
elementToRename.setAttribute("name","horse"); = "horse";
回答by Alnitak
Once you have access to the element object (i.e. with getElementById) you can just change its nameproperty:
一旦您可以访问元素对象（即 with getElementById），您就可以更改其name属性：
el.name = 'horse';
The attribute will mirror the value of the property.
该属性将反映该属性的值。
回答by Alnitak
how to rename a tab in JavaScript. Below is the code.
如何在 JavaScript 中重命名选项卡。下面是代码。
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>