PDA

View Full Version : 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:



<!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/showthread.php?39234-Dynamically-Add-Any-number-of-Textbox&p=211835#post211835

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