AJAX

add text box on click

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 13

Reputation: prashanth18 is an unknown quantity at this point

Solved Threads: 0

prashanth18 prashanth18 is offline

Offline

Newbie Poster

add text box on click

Aug 28th, 2008

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.

•

Join Date: Jul 2008

Posts: 1,076

Reputation: Shanti Chepuru is on a distinguished road

Solved Threads: 98

Shanti Chepuru Shanti Chepuru is offline

Offline

Veteran Poster

Re: add text box on click

Aug 28th, 2008

i think this code will help you...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script>
function generateRow() {
 
var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='food'>";
 
}
 
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<p>
<input name="food" type="text" id="food" />
</p>
<p>
<input name="food" type="text" id="food" />
</p>
<div id="div"></div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
function generateRow() {

var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='food'>";

}

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<p>
<input name="food" type="text" id="food" />
</p>
<p>
<input name="food" type="text" id="food" />
</p>
<div id="div"></div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
</body>
</html>

Last edited by Shanti Chepuru; Aug 28th, 2008 at 6:55 am.

Be intelligent, But Don't try to cheat.. Be innocent But Don't get cheated..

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: add text box on click

Aug 30th, 2008

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<style type="text/css">
<!--
form div { margin: 4px 4px 0 0; padding: 0;
}
 
form input { margin-left: 4px; }
 
form input[type=button] { background-color: #000000; color: silver; margin-left: 2px; }
 
#b1 { background-color: gold; color: black; }
-->
</style>
<style type="text/css">
<!--
form div { margin: 4px 4px 0 0; padding: 0;
}

form input { margin-left: 4px; }

form input[type=button] { background-color: #000000; color: silver; margin-left: 2px; }

#b1 { background-color: gold; color: black; }
-->
</style>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!-- BEGIN HIDING
/* A simple demonstration on how to create and delete, textBox with an onclick event. Hope you had great time! Enjoy coding... */
 
 
var x = 0;
document.onclick = function( add )
{ add = add ? add : window.event;
  var button = add.target ? add.target : add.srcElement;
  if (( button.name ) && ( button.name == 'add' )) 
{ x = x +1; 
 _form = document.getElementsByTagName('form')[0]; 
 _text = document.createElement('input');
_button = document.createElement('input');
_div = document.createElement('div');
_div.id = 'div';
_text.type = 'text';
_text.size = '17';
_text.value = 'textBox' + x;
_text.id = 'text';
_div.appendChild(_text);
_button.type = 'button';
_button.name = 'b1';
_button.id = 'b1';
_button.value = 'Del';
_div.appendChild(_button); 
_form.appendChild(_div);
}
if ( button.name && button.name == 'b1' ) { _form.removeChild(document.getElementById('div')); 
  }  
}
//-->
</script>
<script type="text/javascript">
<!-- BEGIN HIDING
/* A simple demonstration on how to create and delete, textBox with an onclick event. Hope you had great time! Enjoy coding... */

  
var x = 0;
document.onclick = function( add )
{ add = add ? add : window.event;
  var button = add.target ? add.target : add.srcElement;
  if (( button.name ) && ( button.name == 'add' )) 
{ x = x +1; 
 _form = document.getElementsByTagName('form')[0]; 
 _text = document.createElement('input');
_button = document.createElement('input');
_div = document.createElement('div');
_div.id = 'div';
_text.type = 'text';
_text.size = '17';
_text.value = 'textBox' + x;
_text.id = 'text';
_div.appendChild(_text);
_button.type = 'button';
_button.name = 'b1';
_button.id = 'b1';
_button.value = 'Del';
_div.appendChild(_button); 
_form.appendChild(_div);
}
if ( button.name && button.name == 'b1' ) { _form.removeChild(document.getElementById('div')); 
  }  
}
//-->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
<form name="myform">
<input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
</form>
</body>
</html>
</head>
<body>
<form name="myform">
<input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
</form>
</body>
</html>

Last edited by essential; Aug 30th, 2008 at 3:01 am.

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Mar 2009

Posts: 5

Reputation: kalpsen is an unknown quantity at this point

Solved Threads: 0

kalpsen

Offline

Newbie Poster

Re: add text box on click

Mar 3rd, 2009

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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: add text box on click

Mar 3rd, 2009

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
x = x +1; // can also be done as (x += 1)
if ( x != 6 || x < 6 ) {
/* allowing you to create 5 textfields and after that this function wil be disabled  */
} else { return false; }
// Just provide only the condition(s) you need on line 11, enclosing all blocks down to line 30. }
}
x = x +1; // can also be done as (x += 1)
if ( x != 6 || x < 6 ) {
/* allowing you to create 5 textfields and after that this function wil be disabled  */
} else { return false; }
// Just provide only the condition(s) you need on line 11, enclosing all blocks down to line 30. }
}

•

Join Date: Aug 2006

Posts: 319

Reputation: Luckychap is on a distinguished road

Solved Threads: 42

Luckychap

Offline

Posting Whiz

Re: add text box on click

Mar 4th, 2009

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			var counter = 0;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "input"; 
				newText.value = counter;
				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";
 
				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
 
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
	</head>
 
	<body >
		<div id="mainContainer">
			<div><input type="text" ><input type="button" value="Add" onClick="addNew()"></div>
		</div>
	</body>
</html>
<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			var counter = 0;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "input"; 
				newText.value = counter;
				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";
				
				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
				
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
	</head>
	
	<body >
		<div id="mainContainer">
			<div><input type="text" ><input type="button" value="Add" onClick="addNew()"></div>
		</div>
	</body>
</html>

Last edited by Luckychap; Mar 4th, 2009 at 2:52 pm.

When you think you have done a lot, then be ready for YOUR downfall.

•

Join Date: Mar 2009

Posts: 5

Reputation: kalpsen is an unknown quantity at this point

Solved Threads: 0

kalpsen

Offline

Newbie Poster

Re: add text box on click

Mar 5th, 2009

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

•

Join Date: Jan 2008

Posts: 2,052

Reputation: serkan sendur is a glorious beacon of light

Solved Threads: 123

serkan sendur serkan sendur is offline

Offline

Postaholic

Re: add text box on click

Mar 5th, 2009

please mark this thread as solved prashanth18.

Due to lack of freedom of speech, i no longer post on this website.

•

Join Date: Apr 2009

Posts: 2

Reputation: soubalaji is an unknown quantity at this point

Solved Threads: 0

soubalaji

Offline

Newbie Poster

Re: add text box on click

Apr 30th, 2009

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

•

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...
Help with Code Tags

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Some Title</titles>
Help with Code Tags

css Syntax (Toggle Plain Text)
<style type="text/css">

</style>
<style type="text/css">  </style>
Help with Code Tags

javascript Syntax (Toggle Plain Text)
<script type="text/javascript">

</script>
<script type="text/javascript">  </script>
Help with Code Tags

html Syntax (Toggle Plain Text)
</head>
<body>
<form name="myform">
<input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
</form>
</body>
</html>
</head> <body> <form name="myform"> <input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" /> </form> </body> </html>

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: add text box on click

#10

Apr 30th, 2009

Try this format:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
print '<script type="text/javascript">
function addRow() {
var d = document.getElementById("text");
d.innerHTML += \'<p><input type="file" value="" name="field[]" /></p>\';
alert("Hi!");
}
</script>';
print '<script type="text/javascript">
function addRow() {
var d = document.getElementById("text");
d.innerHTML += \'<p><input type="file" value="" name="field[]" /></p>\';
alert("Hi!");
}
</script>';