Online Shopping : Computers : Programming : Languages : JavaScript : Forms

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

8 of 12 people (67%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

How do I replace one form element with another (ie turn a select box into a text field)?

Apr 23rd, 2005 08:58
Bernie Codefreak, Ken Brill,


hi!
i found a way to replace whole <elements>
in the following example i replace
"<input type=text name=input-field size=20>"
with
"<select size=\"1\" name=\"select-field\">
 <option>10</option>
 <option>20</option>
 <option>30</option>
 <option>40</option>
 <option>50</option>
</select>"
----------------------------------------
THE HTML-CODE
----------------------------------------
...
<td id="td-element">
 <input type=text name=input-field size=20>
</td>
...
----------------------------------------
THE Javascript-CODE
----------------------------------------
<script language="JavaScript" type="text/javascript">
function change() {
 document.getElementById("td-element").removeChild(document.getElementById("td-element").firstChild);
//at the line aboth i delete the existing Child from "td-element"
 var newselect = document.createElement("select"); //create a new element
 newselect.setAttribute("size", "1") // set its attriputs
 newselect.setAttribute("name", "dns_prio") //...
 for (var i=1; i<=5; i++){ //do the following 5 times cause the
select-field should contain 5 child-elements
  var newo = document.createElement("option"); //create a new child-element
  var newotext = document.createTextNode( i + "0"); //set the text
between <option> and </option>
  newo.appendChild(newotext); //append the text to the option-element
  newselect.appendChild(newo); // append <option>10</option> to the
select-element
 }
 document.getElementById("td-element").appendChild(newselect); //place
the final element into the html-code
}
</script>
----------------------------------------
Have Fun!