Adding/Removing an Extra Field using Javascript

pierce111 · Sep 7, 2008

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 · Sep 7, 2008

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>

CSS

Code:

#zone1, #zone2 {
 display: none;
}

JavaScript

PHP:

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.

Search

Search

Adding/Removing an Extra Field using Javascript

pierce111

macrumors newbie

angelwatt

Moderator emeritus

Our Staff