Adding/Removing an Extra Field using Javascript

[pierce111]

Hi everyone. I am attempting to do the following:

1. Click a button
2. It adds a element to the page (such as a text box)
3. Then when the user clicks another button, the element is removed, and replaced with another element

However, I just don't know where to start on this one.


Thanks for any help.

[angelwatt]

This is essentially what a tabbed layout does (at least when it stays on one page). That might give you something to work from for searching out code.

[HTML]<div id="buttons">
<input type="button" value="Add" onclick="ShowZone('zone1')" />
<input type="button" value="Change" onclick="ShowZone('zone2')" />
</div>

<div id="zones">
<div id="zone1">
<p>Text in zone 1.</p>
</div>
<div id="zone2">
<p>Text in zone 2.</p>
</div>
</div>[/HTML]

CSS

#zone1, #zone2 {
 display: none;
}

JavaScript

PHP Code:

function ShowZone(z)
{
  var zones = document.getElementById("zones").getElementsByTagName("div");
  for (var x=0, y=zones.length; x < y; x++) {
    zones.[x].style.display = "none"; // vanish all zones
  }
  // make zone z appear
  document.getElementById(z).style.display = "";
} 


Hopefully this is enough to get you started. Let me know if you need further guidance.