SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    PHP Programmer QReyes's Avatar
    Join Date
    Oct 2001
    Location
    Philippines
    Posts
    698
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help: Create New TextField When Clicked

    I've seen this done in a web page before but I forgot where the website is. Here's the scene.

    I have a text box. Below it, is the text "Add Another..." When the user click on the text, it will create another text box below the text box.

    At first, I simply do the writeln but it erases everything in the page. Then I copied and edited a similar code I found on the net. Here is the code:
    Code:
    if (document.layer) {
     document.layer.Sources.document.write(data);
     document.layer.Sources.document.close();
     }
    else {
     if (document.all) {
      Sources.innerHTML = data;
      }
     }
    }
    Sources is the id of <span> and data contains something like this:
    Code:
    <input class=\"txtfld\" id=\"Source\" name=\"Source\" size=\"40\" type=\"text\">
    Anyway, the second try, it kinda work but it will only show one text box after you click the "Add Another..." text. What I want is the more you click "Add Another...", the more text box will show up. And each textbox is an array (name="Source[1]",name="Source[2]",etc.) you can call with PHP.

    Totally new to JavaScripting.
    The Star Circle Quest Community - Community website for SCQ fans.
    Telebisyon.net - Reference guide to TV series shown in the Philippines.
    Lyrics Server Online! - All the lyrics you can get on one website.

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if this is what you wanted:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    <!--
    var st = 1;
    function addTextBox()
    {
     var newTextBox = document.createElement('input');
     newTextBox.className = 'txtfld';
     newTextBox.setAttribute('size', '40');
     newTextBox.setAttribute('type', 'text');
     newTextBox.setAttribute('name', 'source[' + (++st) + ']');
     insertDiv = document.getElementById('div');
     insertBeforeElem = document.getElementById('last');
     insertDiv.insertBefore(document.createTextNode('Source ' + st + ': '), insertBeforeElem);
     insertDiv.insertBefore(newTextBox, insertBeforeElem);
     insertDiv.insertBefore(document.createElement('br'), insertBeforeElem);
    }
    //-->
    </script>
    </head>
    <body>
    <form>
    <div id="div">
     Source 1: <input type="text" name="source[1]" class="txtfld" size="40" /><br />
     <input id="last" type="button" value="Another Source!" onclick="addTextBox();" />
    </div>
    </form>
    </body>
    </html>
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •