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.
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>
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>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
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. }
}
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>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
please mark this thread as solved prashanth18.
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>
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>';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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.