Dynamic Form

[jbrown1028]

Hey all,
I am helping out a friend of mine that is looking to add a simplistic way to add horse events, I decided to do this in ASP because of their existing database.

Now I don't have an ASP question here, this is a JavaScript question. I have a simple table that will have the headers

Date, City, State, Event, Type, Place, Horse, Rider

the only 2 required fields are the Date and the Rider. So upon entering the Date and the Rider's information it will add a new line of text boxes dynamically so she will be able to add as many as she wants. I have a small example here: http://www.jbrownspage.com/form/test.html

There are 3 problems I see with it right now, 1. is it adds 1 box at a time, as to where I would like a whole line of boxes, 2. not to add the boxes until the date and rider is not blank, and finally to line up in the table.

Here is the current code:

-- DELETED OLD OUT DATED CODE

Any help would be really appreciated and I thank you in advance.

[Vladdy]

Since your test page is 404 a few general observations on your code:
1. If you put your form element in a <table> then make it a table. Headers should go in <thead> and each <input> deserves its own <td> - this will take care of lining things up.
2. Element ID's should be unique.
3. Element names in a form should be unique.
4. General suggestion: divide and conquer. You are trying to add extra row when previous row fields change, and then impose restriction on making sure that certain fields are filled. Also what happens when someone edits data in other than last row? Too much unnecessary logic to code. Simply add a button "Add Row" at the end of the table that will handle row addition (you can also add "Delete Row" button while you are at it, because one way or the other there will be users who need to do it). Then do form verification (making sure required fields are filled onsubmit.
5. Speaking of ids and names - in the form namespace they are the same. In your example (if implemented as suggested above) you will not need ids at all.
Add a row by cloning first <tr> (in which you should change your input names so you can have row number in them), and then change names before appending it at the end of the table

[BubikolRamios]

hmm, first of all I would get rid of TABLE and TD stuff completely, and replace it with DIV !

Tip: if you set DIV possition:relative
then jou can set absolute position to all nested DIV-s inside before mentioned DIV.

example:

<DIV style= 'possition: relative'>
  <input type="text" style = 'position:absolute; top:0px;Left:0px; ...>
  <input type="text" style = 'position:absolute; top:0px;Left:120px; ...>
  .....

</DIV>

<DIV style= 'possition: relative'>
  <input type="text" style = 'position:absolute; top:30px;Left:0px; ...>
  <input type="text" style = 'position:absolute; top:30px;Left:120px; ...>
  .....

</DIV>

didn't test it doh.

[Vladdy]

hmm, first of all I would get rid of TABLE and TD stuff completely, and replace it with DIV !

Bad idea. The OP has tabular data and table (when used properly) is the correct element for the job.

[jbrown1028]

Ok, I made the changes to the page, (added, the <THEAD>) and changed the ids back to their original id numbers.

This is how I had it originally and it is doing the same thing. Any other thoughts would be great.

I checked the page, and it seems to be working on my end. Let me know if it isn't working and I will try a different server.

-- DELETED OLD OUT DATED CODE

Thanks

[jbrown1028]

hmm, first of all I would get rid of TABLE and TD stuff completely, and replace it with DIV !

Tip: if you set DIV possition:relative
then jou can set absolute position to all nested DIV-s inside before mentioned DIV.

example:

<DIV style= 'possition: relative'>
  <input type="text" style = 'position:absolute; top:0px;Left:0px; ...>
  <input type="text" style = 'position:absolute; top:0px;Left:120px; ...>
  .....

</DIV>

<DIV style= 'possition: relative'>
  <input type="text" style = 'position:absolute; top:30px;Left:0px; ...>
  <input type="text" style = 'position:absolute; top:30px;Left:120px; ...>
  .....

</DIV>

didn't test it doh.

I stated out using the <DIV> tag, although it started to have other problems, I like the idea, but I think I agree with Vladdy that the table is the way to go.

Your help is quite welcomed, thank you

[Vladdy]

Your logic is still flawed. If you insist on adding rows on change then
1. Your onchage function does not need all those arguements - all it needs to pass is this:

<input onchange="myFunction(this)" />

The elements ID that you are passing and using in the function to access that element is passed directly by this, and then you can use elem.form to access the form rather than going getElementById route:

function myFunction(inputElement)
  { var frm = inputElement.form;
     /* Do stuff */
  }

Then you need to clone complete row, not individual elements, just make sure you set the clone flag to include the element descendants.

// frm is the form element that you accessed as shown above...
//Assuming you are working with the first table in the form
var tblbody = frm.getElementsByTagName('table')[0].getElementsByTagName('tbody')[0];
var row=tblbody.getElementsByTagName('tr')[0];
var newRow = row.cloneNode(true);
var newInputs = newRow.getElementsByTagName('input');
for(var i=0; i<newInputs.length; i++)
  { //iterate through all new inputs, change their names and empty values
  }
tblbody.appendChild(newRow);

[jbrown1028]

Well I am still having issues. I understand to clone the row, just not how to impliment it into my system. Any thoughts?

[jbrown1028]

Ok, here it is, I believe I have almost have this figured out now. It is properly doing what I want it to do, although 1 minor thing.

I am still using the onchange command to drop a new row of input boxes, and the submit is comma separating each column in each row. Perfect, with the simple ASP command instr I can separate each one into an array and then place them in the database. All of this is solved (Thank you Vladdy for the input, the cloning of the row is much better)

Now what I am stuck with at this point, is I don't want the value of the first box to duplicate in the next set of rows. I have narrowed it down to a specific area, but my Javascript is just a little rusty. (Ok it is actually too rusty for Bondo)

	[COLOR="Navy"]var[/COLOR] miLastID [COLOR="Navy"]=[/COLOR] [COLOR="Red"]1[/COLOR];
	[COLOR="Navy"]function[/COLOR] addNewElement(sourceCloneID, targetParentID, [B][COLOR="Red"]SourceFieldID[/COLOR][/B]){
		[COLOR="Navy"]var[/COLOR] ndSource [COLOR="Red"]=[/COLOR] [COLOR="Blue"]document[/COLOR].getElementById(sourceCloneID);
		[COLOR="Navy"]var[/COLOR] ndTargetParent [COLOR="Red"]=[/COLOR] document.getElementById(targetParentID);
		[B][COLOR="Navy"]var[/COLOR] ndField = [COLOR="Blue"]document[/COLOR].[COLOR="Blue"]getElementById[/COLOR]([COLOR="Blue"]SourceFieldID[/COLOR]);[/B]
		if(ndSource){
			var ndCloneTarget = ndTargetParent.cloneNode(true);
			[B][COLOR="Navy"]var[/COLOR] ndCloneField = ndField.[COLOR="Navy"]cloneNode[/COLOR]([COLOR="DarkGreen"]true[/COLOR]);[/B]
			ndTargetParent.setAttribute('id', getNextID(ndCloneTarget.id))
			[B]ndCloneField.[COLOR="Blue"]setAttribute[/COLOR]([COLOR="Blue"]'id'[/COLOR], getNextID([COLOR="Blue"]ndField.id[/COLOR]))[/B]
			ndTargetParent.appendChild(ndCloneTarget)
			[B]ndCloneField.[COLOR="Blue"]setAttribute[/COLOR]([COLOR="Blue"]'value'[/COLOR],[COLOR="Blue"]''[/COLOR])[/B]
		}
	}

	[B][COLOR="Navy"]function[/COLOR] [COLOR="Lime"]getNextID[/COLOR][COLOR="Black"]([/COLOR][COLOR="Blue"]sEdit[/COLOR][COLOR="Black"])[/COLOR][COLOR="Red"]{[/COLOR][/B]
		[B][COLOR="Navy"]var[/COLOR][/B] objEdit = [COLOR="Blue"]new[/COLOR] [COLOR="Lime"]String[/COLOR]([COLOR="Blue"]sEdit[/COLOR])
		miLastID [COLOR="Blue"]=[/COLOR] miLastID [COLOR="Blue"]+[/COLOR] [COLOR="Red"]1[/COLOR]
		return objEdit.substr([COLOR="Blue"]1[/COLOR], objEdit.[COLOR="Blue"]length[/COLOR] [COLOR="Navy"]-[/COLOR][COLOR="Blue"]1[/COLOR]) [COLOR="Red"]+[/COLOR] miLastID
	}

Now I have colored some of the lines to make it a little easier to read. The bold, red, SourceFieldID is the id tag in the input field, called 'in1', then I am trying to clone that id (deep) then adding 1 to the id variable with the getNextID function. From here I am then trying to clear the value of that input box. It is only clearing the previous input box. Any suggestions?

Here is the entire new code, which also can be seen in action at: http://www.jbrownspage.com/form/test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testing Database Enteries</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
	var miLastID = 1;
	function addNewElement(sourceCloneID, targetParentID, SourceFieldID){
		var ndSource = document.getElementById(sourceCloneID);
		var ndTargetParent = document.getElementById(targetParentID);
		var ndField = document.getElementById(SourceFieldID);
		if(ndSource){
			var ndCloneTarget = ndTargetParent.cloneNode(true);
			var ndCloneField = ndField.cloneNode(true);
			ndTargetParent.setAttribute('id', getNextID(ndCloneTarget.id))
			ndCloneField.setAttribute('id', getNextID(ndField.id))
			ndTargetParent.appendChild(ndCloneTarget)
			ndCloneField.setAttribute('value','')
		}
	}

	function getNextID(sEdit){
		var objEdit = new String(sEdit)
		miLastID = miLastID + 1
		return objEdit.substr(1, objEdit.length -1) + miLastID
	}

	function handleEnter (field, event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
		if (keyCode == 13) {
			var i;
			for (i = 0; i < field.form.elements.length; i++)
				if (field == field.form.elements[i])
					break;
			i = (i + 1) % field.form.elements.length;
			field.form.elements[i].focus();
			return false;
		} 
		else
		return true;
	}

	function submitonce(theform){
		//if IE 4+ or NS 6+
		if (document.all||document.getElementById){
			//screen thru every element in the form, and hunt down "submit" and "reset"
			for (i=0;i<theform.length;i++){
				var tempobj=theform.elements[i]
				if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
				//disable em
				tempobj.disabled=true
			}
		}
	}
</script>
</head>

<body>
<form name='frmTest' action='test2.asp' method='post' onSubmit="submitonce(this)">
	<table width="680" align="center">
		<tr>
			<td align="center">
				<strong>Date</strong>
			</td>
			<td align="center">
				<strong>City</strong>
			</td>
			<td align="center">
				<strong>State</strong>
			</td>
			<td align="center">
				<strong>Event</strong>
			</td>
			<td align="center">
				<strong>Type</strong>
			</td>
			<td align="center">
				<strong>Place</strong>
			</td>
			<td align="center">
				<strong>Horse</strong>
			</td>
			<td align="center">
				<strong>Rider</strong>
			</td>
		</tr>
		<tr id='frmTestID1'>
			<td id="if1">
			    <input type="text" size="11" maxlength="10" id="in1" name="lblDate" onChange="addNewElement('in1', 'frmTestID1', 'in1')" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
			    <input type="text" name="lblCity" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" size="3" maxlength="2" name="lblState" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" name="lblEvent" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" name="lblType" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" size="3" maxlength="2" name="lblPlace" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" name="lblHorse" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
			<td>
				<input type="text" name="lblRider" value="" onkeypress="return handleEnter(this, event)">&nbsp;
			</td>
		</tr>
		<tr>
			<td align="center" colspan="8">
			<input type="submit">
			</td>
		</tr>
	</table>
</form>