add text box on click

Question

prashanth18 -2 Newbie Poster

15 Years Ago

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.

javascript

8 Contributors
10 Replies
6K Views
3 Years Discussion Span
Latest Post 12 Years Ago Latest Post by kunalkrishneel

All 10 Replies

Shanti C 106 Posting Virtuoso

15 Years Ago

i think this code will help you...

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

essential 84 Posting Shark

15 Years Ago

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

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

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

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

</head>
<body>
<form name="myform">
<input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
</form>
</body>
</html>

essential 84 Posting Shark

15 Years Ago

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:

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kalpsen 0 Newbie Poster · Answer 1 · 2009-03-03T13:16:14+00:00

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

Luckychap 68 Posting Pro in Training · Answer 2 · 2009-03-05T00:45:38+00:00

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

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

kalpsen 0 Newbie Poster · Answer 3 · 2009-03-06T06:12:45+00:00

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

serkan sendur 821 Postaholic Banned · Answer 4 · 2009-03-06T06:48:27+00:00

serkan sendur 821 Postaholic

15 Years Ago

please mark this thread as solved prashanth18.

soubalaji 0 Newbie Poster · Answer 5 · 2009-04-30T14:54:25+00:00

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

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

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

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

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

</head>
<body>
<form name="myform">
<input name="txt1" type="text" size="17" /><input name="add" type="button" value="Add" />
</form>
</body>
</html>

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-04-30T19:08:43+00:00

Try this format:

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>';

kunalkrishneel 0 Newbie Poster · Answer 7 · 2012-01-06T09:26:15+00:00

hey thanks for your help but m want to extract data from those extra text box....nid help....hw do i post wen i dont hav the textbox name

add text box on click

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers