943,672 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > add text box on click
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 28th, 2008
0

add text box on click

Expand Post »
Hello All,

I have this situation.

1. I have one Text box (say first) and add button.
2. If i click add, one text box should be added + one delete button.
3. if i click add again, second text box should be added + one delete button.
and so on..
4. on clicking any delete button, the corresponding text box should get deleted.
5. The add button should be for only first text box.

Please provide me code for this.
or only for adding textboxes, iam new to Javascript.

Thanks a lot.
Similar Threads
Reputation Points: 8
Solved Threads: 1
Newbie Poster
prashanth18 is offline Offline
15 posts
since Jul 2008
Permalink
Aug 28th, 2008
1

Re: add text box on click

i think this code will help you...
html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled Document</title>
  5.  
  6. <script>
  7. function generateRow() {
  8.  
  9. var d=document.getElementById("div");
  10. d.innerHTML+="<p><input type='text' name='food'>";
  11.  
  12. }
  13.  
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <form id="form1" name="form1" method="post" action="">
  19. <label>
  20. <input name="food" type="text" id="food" />
  21. </label>
  22. <p>
  23. <input name="food" type="text" id="food" />
  24. </p>
  25. <p>
  26. <input name="food" type="text" id="food" />
  27. </p>
  28. <div id="div"></div>
  29. <p><input type="button" value="Add" onclick="generateRow()"/></p>
  30. <p>
  31. <label>
  32. <input type="submit" name="Submit" value="Submit" />
  33. </label>
  34. </p>
  35. </form>
  36. </body>
  37. </html>
Last edited by Shanti C; Aug 28th, 2008 at 6:55 am.
Reputation Points: 137
Solved Threads: 162
Posting Virtuoso
Shanti C is offline Offline
1,641 posts
since Jul 2008
Permalink
Aug 30th, 2008
0

Re: add text box on click

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...
html Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Some Title</titles>
css Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. <!--
  3. form div { margin: 4px 4px 0 0; padding: 0;
  4. }
  5.  
  6. form input { margin-left: 4px; }
  7.  
  8. form input[type=button] { background-color: #000000; color: silver; margin-left: 2px; }
  9.  
  10. #b1 { background-color: gold; color: black; }
  11. -->
  12. </style>

javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. <!-- BEGIN HIDING
  3. /* A simple demonstration on how to create and delete, textBox with an onclick event. Hope you had great time! Enjoy coding... */
  4.  
  5.  
  6. var x = 0;
  7. document.onclick = function( add )
  8. { add = add ? add : window.event;
  9.   var button = add.target ? add.target : add.srcElement;
  10.   if (( button.name ) && ( button.name == 'add' )) 
  11. { x = x +1; 
  12.  _form = document.getElementsByTagName('form')[0]; 
  13.  _text = document.createElement('input');
  14. _button = document.createElement('input');
  15. _div = document.createElement('div');
  16. _div.id = 'div';
  17. _text.type = 'text';
  18. _text.size = '17';
  19. _text.value = 'textBox' + x;
  20. _text.id = 'text';
  21. _div.appendChild(_text);
  22. _button.type = 'button';
  23. _button.name = 'b1';
  24. _button.id = 'b1';
  25. _button.value = 'Del';
  26. _div.appendChild(_button); 
  27. _form.appendChild(_div);
  28. }
  29. if ( button.name && button.name == 'b1' ) { _form.removeChild(document.getElementById('div')); 
  30.   }  
  31. }
  32. //-->
  33. </script>

html Syntax (Toggle Plain Text)
  1. </head>
  2. <body>
  3. <form name="myform">
  4. <input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
  5. </form>
  6. </body>
  7. </html>
Last edited by essential; Aug 30th, 2008 at 3:01 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Mar 3rd, 2009
0

Re: add text box on click

Hey Essential, Thanks for this excellent piece of code.

But there is a typo here: </titles> instead of </title>.


Also, how to make the text box undeditable, if i have to ?? Please let me know if you have an answer
Last edited by kalpsen; Mar 3rd, 2009 at 3:17 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
kalpsen is offline Offline
5 posts
since Mar 2009
Permalink
Mar 3rd, 2009
0

Re: add text box on click

Thanks for reminding me!
There are many way's that you can do to disable this function -- depending on how you provide conditional statement's.
Ok in this demo, i will use the x variable as my counter to execute the code for 5x's.
From line #11:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. x = x +1; // can also be done as (x += 1)
  2. if ( x != 6 || x < 6 ) {
  3. /* allowing you to create 5 textfields and after that this function wil be disabled  */
  4. } else { return false; }
  5. // Just provide only the condition(s) you need on line 11, enclosing all blocks down to line 30. }
  6. }
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Mar 4th, 2009
0

Re: add text box on click

This is exact code u want. Its simple. try this.

html Syntax (Toggle Plain Text)
  1. <html>
  2. 	<head>
  3. 		<title>test</title>
  4. 		<script type="text/javascript">
  5. 			var counter = 0;
  6. 			function addNew() {
  7. 				// Get the main Div in which all the other divs will be added
  8. 				var mainContainer = document.getElementById('mainContainer');
  9. 				// Create a new div for holding text and button input elements
  10. 				var newDiv = document.createElement('div');
  11. 				// Create a new text input
  12. 				var newText = document.createElement('input');
  13. 				newText.type = "input"; 
  14. 				newText.value = counter;
  15. 				// Create a new button input
  16. 				var newDelButton = document.createElement('input');
  17. 				newDelButton.type = "button";
  18. 				newDelButton.value = "Delete";
  19.  
  20. 				// Append new text input to the newDiv
  21. 				newDiv.appendChild(newText);
  22. 				// Append new button input to the newDiv
  23. 				newDiv.appendChild(newDelButton);
  24. 				// Append newDiv input to the mainContainer div
  25. 				mainContainer.appendChild(newDiv);
  26. 				counter++;
  27.  
  28. 				// Add a handler to button for deleting the newDiv from the mainContainer
  29. 				newDelButton.onclick = function() {
  30. 						mainContainer.removeChild(newDiv);
  31. 				}
  32. 			}
  33. 		</script>
  34. 	</head>
  35.  
  36. 	<body >
  37. 		<div id="mainContainer">
  38. 			<div><input type="text" ><input type="button" value="Add" onClick="addNew()"></div>
  39. 		</div>
  40. 	</body>
  41. </html>
Last edited by Luckychap; Mar 4th, 2009 at 2:52 pm.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Permalink
Mar 5th, 2009
0

Re: add text box on click

Hi Shanti,

Thanks for this code. The code is simple and elegant and helped me insert the text boxes inbetween the forums.

I have a question here ?

I created 3 text boxes for each click on the button. I wanted to FOCUS (the cursor) on the second box.

I tried the usual 'document.Myform.Myelement.focus();'

But this is not working, I guess may be due to the fact that the form element is not there yet for sure. Javascript error saying that it is null.

Do you know how to make the cursor placed as well, while we creating the boxes ??

Waiting for your reply.


Thanks
Kalpsen
Reputation Points: 10
Solved Threads: 0
Newbie Poster
kalpsen is offline Offline
5 posts
since Mar 2009
Permalink
Mar 5th, 2009
0

Re: add text box on click

please mark this thread as solved prashanth18.
Featured Poster
Reputation Points: 854
Solved Threads: 127
Banned
serkan sendur is offline Offline
2,057 posts
since Jan 2008
Permalink
Apr 30th, 2009
0

Re: add text box on click

Hi,

Iam creating a CGI page in that iam creating a text box by using the below code:
But it's now working in the CGI page. But the same working in htm page.

print "<script language=\"javascript\">
function addRow() {
var d=document.getElementById(\"text\");
d.innerHTML+=\"<p><input type='file' value=''name='field[]' />\";
alert (\"hi\");

}
</script>
CGI code:

print $html->input({-id=>$rowid, -type=>'button', -value=>'Add', -onclick=>"addRow()"});

Please let me know if you have any idea about this. Waiting for your reply.

Regards,
Balaji S



Click to Expand / Collapse  Quote originally posted by essential ...
Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...
html Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Some Title</titles>
css Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. <!--
  3. form div { margin: 4px 4px 0 0; padding: 0;
  4. }
  5.  
  6. form input { margin-left: 4px; }
  7.  
  8. form input[type=button] { background-color: #000000; color: silver; margin-left: 2px; }
  9.  
  10. #b1 { background-color: gold; color: black; }
  11. -->
  12. </style>

javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. <!-- BEGIN HIDING
  3. /* A simple demonstration on how to create and delete, textBox with an onclick event. Hope you had great time! Enjoy coding... */
  4.  
  5.  
  6. var x = 0;
  7. document.onclick = function( add )
  8. { add = add ? add : window.event;
  9.   var button = add.target ? add.target : add.srcElement;
  10.   if (( button.name ) && ( button.name == 'add' )) 
  11. { x = x +1; 
  12.  _form = document.getElementsByTagName('form')[0]; 
  13.  _text = document.createElement('input');
  14. _button = document.createElement('input');
  15. _div = document.createElement('div');
  16. _div.id = 'div';
  17. _text.type = 'text';
  18. _text.size = '17';
  19. _text.value = 'textBox' + x;
  20. _text.id = 'text';
  21. _div.appendChild(_text);
  22. _button.type = 'button';
  23. _button.name = 'b1';
  24. _button.id = 'b1';
  25. _button.value = 'Del';
  26. _div.appendChild(_button); 
  27. _form.appendChild(_div);
  28. }
  29. if ( button.name && button.name == 'b1' ) { _form.removeChild(document.getElementById('div')); 
  30.   }  
  31. }
  32. //-->
  33. </script>

html Syntax (Toggle Plain Text)
  1. </head>
  2. <body>
  3. <form name="myform">
  4. <input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
  5. </form>
  6. </body>
  7. </html>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
soubalaji is offline Offline
2 posts
since Apr 2009
Permalink
Apr 30th, 2009
0

Re: add text box on click

Try this format:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. print '<script type="text/javascript">
  2. function addRow() {
  3. var d = document.getElementById("text");
  4. d.innerHTML += \'<p><input type="file" value="" name="field[]" /></p>\';
  5. alert("Hi!");
  6. }
  7. </script>';
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript issues in firefox
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to get a value from textarea in javascript?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC