Dynamically Add Any number of Textbox

**beyondmart** · 11-29-2008, 05:58 PM

1) CODE TITLE: Dynamically Add Any Number of Textbox

2) AUTHOR NAME/NOTES:
Author : Daxa
Website : http://www.beyondmart.com/

3) DESCRIPTION: This javascript code is used to add textbox element dynamically in page or form. You need to call one function "addTextBox()". Its a easy to modify this script as per your requirement.

4) CODE:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Textbox</title>
<script type='text/javascript'>
// --------------------------------------------------------
// Author  : Daxa
// Website : http://www.beyondmart.com/
// --------------------------------------------------------
	
	var inival=0; // Initialise starting element number
	
	// Call this function to add textbox
	function addTextBox()
	{
		var newArea = add_New_Element();
		var htcontents = "<input type='text' name='textbx[]'/>"; 
		document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
	}
	
	
	function add_New_Element() {
		  inival=inival+1;  // Increment element number by 1
		  var ni = document.getElementById('area');
		  var newdiv = document.createElement('div'); // Create dynamic element
		  var divIdName = 'my'+inival+'Div';
		  newdiv.setAttribute('id',divIdName);
		  ni.appendChild(newdiv);
		  return divIdName;
	}

</script>
</head>
<body>

<!-- Just call function 'addTextBox()' to add textbox -->
<a onclick='addTextBox()' href='#'>Add New Text Box </a>

<br/>
<!-- Textbox will be added in followng DIV -->
<div id='area'></div>

</body>
</html>

**sendmefree** · 11-30-2008, 09:31 AM

I was searching this scripts for my perpsonnel projects. This script is really nice because it is very compact but are very userful. Can this script use for any element. Actaully i am not master in javascript. Suppose i want to add listbox and text both at a time. How can i do it ? plz help.

**beyondmart** · 12-01-2008, 02:55 AM

Yes, you can do it easily. Its a very simple to edit this scripts as per your requirements.

You just search following line in given scripts

document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents'

In above line you have to change value in variable "htcontents". You can pass any string in this variable.

So easy... enjoy !!

**sendmefree** · 12-02-2008, 02:29 AM

Thanks to a guy. This script works well for me.

**jsdev** · 06-02-2009, 09:16 PM

When I tested this Javascript code on Firefox, it worked. However, when I tried to test this code in Internet Explorer browser, the page does not even display and instead a blank page shows up. The IE version I am using is 7 and my Windows version is Vista. I would like to know whether there are any compatibility issues for this code with IE.

**sendmefree** · 11-28-2009, 02:25 AM

Sorry friend. "<title>" tag is not completed properly in my previous code.

You just change

"<title>Dynamic Textbox/title>" into "<title>Dynamic Textbo x</title>"

I have tested in IE. It works ok.
At present i was busy to develop other website and so could not reply you.

**hah** · 07-28-2016, 04:14 PM

Hi

I've tried out this code. Unfortunately there's nothing happened whenever i clicked on Add Answer. The additional text box isn't appeared. Please advice me on this matter. Thanks.

**jscheuer1** · 07-28-2016, 05:15 PM

hah - As far as I know this script submission from 2008 never became part of the DD library. You might be able to get support from the author's website:

http://www.beyondmart.com/

see also the error explained here:

http://www.dynamicdrive.com/forums/s...835#post211835

which I've also just corrected in the original submission version (post #1 in this thread)

Thread: Dynamically Add Any number of Textbox

Thread Tools

Search Thread

Dynamically Add Any number of Textbox

Its simple to edit

RE: Dynamically Add Any Number of Textbox

Its works after modify <title> tag

Bookmarks

Bookmarks

Posting Permissions