Help: Create New TextField When Clicked

**QReyes** · Sep 16, 2003 10:03

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.

**Jeff Lange** · Sep 16, 2003 10:40

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>

User Tag List

Thread: Help: Create New TextField When Clicked

Thread Tools

Display

Help: Create New TextField When Clicked

Bookmarks

Bookmarks

Posting Permissions