Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Adding text form field on button click

Status
Not open for further replies.
DreamerZ

DreamerZ

Programmer
Jul 11, 2001
254
US
I'm fairly new to JS so any help would be appreciated.

I need to add 2 new text objects to an existing form when the user presses a button ("Add Fields").

First, is using the document.write(text field HTML) the correct way to go about this? And, how can I set the name of each subsequent field. I.E. the existing field is #1. Added fields need to be #2, #3...

On testing, the document.write by itself doesn't add the fields in the current form. I tried to add the form name (document.formname.write), but that doesn't support the object.

Thanks for any pointers here.



DreamerZ
simplesolutions04@sbcglobal.net
[ignore][/ignore]
 
Sort by date Sort by votes
DreamerZ,

Maybe this will give you a start:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>TEST</title>
<script language="JavaScript">
function mkFields(num){
for(var i = 2; i < num + 2; i++){
  var nwel = document.createElement('input');
  nwel.setAttribute('type','text');
  nwel.setAttribute('size','20');
  nwel.setAttribute('value',i);
  nwel.setAttribute('name','txt'+ i);
  var nwln = document.createElement('<BR>');
  document.getElementsByTagName('form').item(0).appendChild(nwln);
  document.getElementsByTagName('form').item(0).appendChild(nwel);
 }
}
</script></head><body>
<form name="f">
<input type="text" size="20" name="txt1" value="1">
<input type="submit">
<input type="button" value="Reset" onClick="location.reload();">
</form>
<input type="button" value="New Fields" onClick="mkFields(4);">
</body>
</html>

HTH

Great Javascript Resource:
 
Upvote 0 Downvote
OOoops,

DreamerZ change the line above:

var nwln = document.createElement('<BR>');

To be:

var nwln = document.createElement('BR');
 
Upvote 0 Downvote
That works! Thank you very much! I would like to adjust it a bit, however. Currently, the above code puts the new fields at the bottom of the form. I want them in a specific location in a table inside the form. In working on this issue, I came up with the following code to do this:
Code: 
function add_Milestone() //ADD new Cells
{
	var x=document.getElementById('Milestones').insertRow(2)
	var y=x.insertCell(0)
	var z=x.insertCell(1)
	y.innerHTML="<input type=text name=WR_MilestonesDate2 size=16>"
	z.innerHTML="<input type=text name=WR_MilestonesText2 size=108>"
}
It does work. The only thing I haven't done yet is set the names of the new cells. They are currently WR_Milestones..." which I need to have incremented with 2,3,4... for storage in the DB.

So, can your code be adjusted to add the rows in the specific location on the form or how can my code be adjusted to increment the field name?

Thx.


DreamerZ
simplesolutions04@sbcglobal.net
[ignore][/ignore]
 
Upvote 0 Downvote
I think I figured out how to adjust my code with the setAttribute from yours.
Code: 
y.setAttribute('name','WR_MilestonesDate'+i);
z.setAttribute('name','WR_MilestonesText'+i);

First, how can I check that the names are set properly? Also, any clue as to how I can make the transfer in the PHP? I might need to post that question in the PHP forum.

Thx.



DreamerZ
simplesolutions04@sbcglobal.net
[ignore][/ignore]
 
Upvote 0 Downvote
Just FYI, for anyone that's interested. I finalized this code application to do what I needed. Bascially, I'm adding a variable number of rows based on a selection box to an existing form in a static position. I'm setting the size and box names for further use in PHP. The code is below:
Code: 
function add_Milestone(num) //ADD new Cells
{
	if (document.NewWR.Num_Milestones.selectedIndex==0)
	{
		alert("Select the number of rows to add");
		return false;
	}
else
{
	for(var i=2; i < num+2; i++)
	{
		var x=document.getElementById('Milestones').insertRow(i+1)
		var y=x.insertCell(0)
		var z=x.insertCell(1)
		y.innerHTML="<input type=text size=16 name=WR_MilestonesDate"+i+">"
		z.innerHTML="<input type=text size=108 name=WR_MilestonesText"+i+">"
	}
}
}
Notice the insertRow() number is variable by i. That's so the rows are added sequentially. There is one row already on the form and added rows are placed after that in order, 2,3,4, etc.

Just thought you'd like to know how I solved this issue.



DreamerZ
simplesolutions04@sbcglobal.net
[ignore][/ignore]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
409
gmmastros
gmmastros
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
682
Rayj0000
Rayj0000
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
733
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
335
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top