Adding HTML Controls

JavaScriptSource Staff Jul 13, 2005

General

Use this script to add HTML controls to your forms. This example uses the <input> tag.

Click below to dynamically create/remove input boxes in this field

Add more input field(s)
Remove field(s)

Notes

Created by: Husay
Web Site: http://www.communitxt.net
Posted: July 13, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: addHTMLControls.js

var arrInput = new Array(0);
  var arrInputValue = new Array(0);

function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
  return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br/>";
}

function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="addHTMLControls.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p id="parah">Click below to dynamically create/remove input boxes in this field</p>

<a href="javascript:addInput()">Add more input field(s)</a><br/>
<a href="javascript:deleteInput()">Remove field(s)</a>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details