Results 1 to 8 of 8

Thread: Dynamically Add Any number of Textbox

  1. #1
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamically Add Any number of Textbox

    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>
    Last edited by jscheuer1; 07-28-2016 at 05:16 PM. Reason: format - later fix syntax error

  2. #2
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  3. #3
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking Its simple to edit

    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 !!

  4. #4
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

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

  5. #5
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default RE: Dynamically Add Any Number of Textbox

    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.

  6. #6
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Its works after modify <title> tag

    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.
    Last edited by jscheuer1; 08-18-2010 at 09:39 AM. Reason: remove unnecessary hotlink

  7. #7
    Join Date
    Jul 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •