Added text boxes dynamically

**chrscote** · 07-06-2007, 03:07 PM

I have a table in which users can enter up to 10 zip codes. Right now, I have 10 individual text boxes where they can enter the zips. However, as you can imagine, it looks a bit klunky. I'd like to be able to have a single text box with a text field somewhere nearby (either above or below probably) and have it so that when the user adds text in the box and click a button the text that was entered is placed in the field.
I just can't remember how to do this. Can someone please help me?

Thank you,
Chris Cote

**jscheuer1** · 07-06-2007, 04:05 PM

Text boxes? Text fields? There aren't any such things. I think you mean textarea and text input, respectively. Do you?

**Twey** · 07-06-2007, 04:06 PM

Something like this:

Code:

  <script type="text/javascript">
    var zipForm;
    function isZIP(s) {
      return /^\d{5}(-\d{4})?$/.test(s);
    }
  </script>
</head>
<body>
  <form action="/cgi-bin/processor" method="post">
   <div></div>
    <script type="text/javascript">
      zipForm = document.forms[document.forms.length - 1];
      zipForm.zipDiv = (zipForm.zipDiv = document.getElementsByTagName("div"))[zipForm.zipDiv.length - 1];
    </script>
    <input type="text" name="nextZip">
    <input type="button" onclick="
      var f = this.form,
        z = f.elements['nextZip'].value;
      if(!isZIP(z))
        return alert('Invalid ZIP code.');
      var d = document.createElement('div'),
        h = document.createElement('input');
      h.type = 'hidden';
      h.name = 'zip[]'; // [] for PHP and its poor support of the CGI standard.
      d.appendChild(document.createTextNode(z));
      d.appendChild(h).value = z;
      f.zipDiv.appendChild(d);
    ">
  </form>

Thread: Added text boxes dynamically

Thread Tools

Search Thread

Added text boxes dynamically

Bookmarks

Bookmarks

Posting Permissions