如何动态改变<INPUT>标记的name属性的值?

Question

<SELECT name="selProp" size="1" onchange="this.parentNode.all('txtName').name=this.options[this.selectedIndex].value;this.parentNode.all('txtPass').name=this.options[this.selectedIndex].text">
<OPTION value="1">AAA</OPTION>
<OPTION value="2">BBB</OPTION>
<OPTION value="3">CCC</OPTION>
<OPTION value="4">DDD</OPTION>
<OPTION value="5">EEE</OPTION>
    </SELECT>
    Username: <INPUT type="text" name="txtName"><br>
    Password: <INPUT type="text" name="txtPass"><br>
              <INPUT type="submit" value="Submit">&nbsp;
              <INPUT type="reset" value="Reset">

Answer 1

使用document.createElement()方法重建该文本框

Answer 2

<script>
function change(){
var e=document.getElementsByName('txtName')
//也可不通過name來獲得e=document.form1.all.tags('input')
e[0].outerHTML=e[0].outerHTML.replace(e[0].name,'NewName')
alert(document.form1.NewName.value)
}
</script>
<FORM name="form1" action="http://xxx.com" method="post">
    <SELECT name="selProp" size="1" onchange="change()">
<OPTION value="1">AAA</OPTION>
<OPTION value="2">BBB</OPTION>
<OPTION value="3">CCC</OPTION>
<OPTION value="4">DDD</OPTION>
<OPTION value="5">EEE</OPTION>
    </SELECT>
    Username: <INPUT type="text" name="txtName" value="abc"><br>
    Password: <INPUT type="text" name="txtPass" value="xyz"><br>
              <INPUT type="submit" value="Submit">&nbsp;
              <INPUT type="reset" value="Reset">
</FORM>

Answer 3

createElement()方法如何使用？能否给个详细点的例子？THX～

Answer 4

Creates an instance of the element object for the specified tag.SyntaxoElement = document.createElement(sTag)ParameterssTag Required. String that specifies the name of an element. Return ValueReturns an element object.ResIn Microsoft&reg; Internet Explorer 4.0, the only new elements you can create are IMG, AREA, and OPTION. As of Internet Explorer 5, you can create all elements in script, except for FRAME, IFRAME, and SELECT. In addition, the read-only properties of independently created elements are read/write. Before you use new objects, you must explicitly add them to their respective collections or to the document. To insert new elements into the current document, use the insertBefore or appendChild methods. You must perform a second step when using createElement to create the INPUT element. The createElement method generates an input text box, because that is the default INPUT type property. To insert any other kind of INPUT element, first invoke createElement for INPUT, then set the type property to the appropriate value in the next line of code. Attributes can be included with the sTag as long as the entire string is valid HTML. This is useful since you cannot set the NAME attribute at run time on anchor objects created with the createElement method. For example, to create an anchor with a NAME attribute, include the attribute and value when using the createElement method. You can also use the innerHTML property.ExampleThis example uses the createElement method to dynamically update the contents of a Web page by adding an element selected from a drop-down list box.<SCRIPT>
function fnCreate(){
    oData.innerHTML="";
    var oOption=oSel.options[oSel.selectedIndex];
    if(oOption.text.length>0){
    var aElement=document.createElement(oOption.text);
    eval("aElement." + oOption.value + "='" + oText.value + "'");
    if(oOption.text=="A"){
        aElement.href="javascript:alert('A link.')";
   }
   }
    oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A
<OPTION VALUE="value">&lt;INPUT TYPE="button"&gt;
<INPUT TYPE="text" ID="oText" VALUE="Sample Text">
<SPAN ID="oData" ></SPAN>