Adding/Removing an Extra Field using Javascript

Discussion in 'Web Design and Development' started by pierce111, Sep 7, 2008.

  1. macrumors newbie

    Joined:
    Aug 2, 2008
    #1
    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.
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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=0y=zones.lengthyx++) {
        
    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.
     

Share This Page