954,593 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
3 Years Ago
0

add text box on click

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.

prashanth18
Newbie Poster
15 posts since Jul 2008
Reputation Points: 8
Solved Threads: 1
 
3 Years Ago
Show Comments
1

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>
Shanti C
Posting Virtuoso
1,642 posts since Jul 2008
Reputation Points: 137
Solved Threads: 162
 
3 Years Ago
0

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
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
0

Hey Essential, Thanks for this excellent piece of code.

But there is a typo here: instead of .


Also, how to make the text box undeditable, if i have to ?? Please let me know if you have an answer

kalpsen
Newbie Poster
5 posts since Mar 2009
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
0

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. }
}
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
0

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>
Luckychap
Posting Pro in Training
444 posts since Aug 2006
Reputation Points: 83
Solved Threads: 61
 
3 Years Ago
0

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

kalpsen
Newbie Poster
5 posts since Mar 2009
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
0

please mark this thread as solved prashanth18.

serkan sendur
Postaholic
Banned
2,062 posts since Jan 2008
Reputation Points: 854
Solved Threads: 127
 
3 Years Ago
0

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 "
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>
soubalaji
Newbie Poster
2 posts since Apr 2009
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
0

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>';
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
4 Months Ago
0

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

kunalkrishneel
Newbie Poster
1 post since Jan 2012
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed