Ah yes, I understand this implementation is a great idea if I wasn't past that no tipping point. What I have already in place is beyond changing to this code, and my server doesn't support Ajax. Mostly what I want is the ability to add a new row of blank boxes when ever the first field is changed in any way. I have quite a bit of code here, and this is what I am thinking. If I misunderstood your response, please let me know.
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)
Code:
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
}
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
Code:
<!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)">
</td>
<td>
<input type="text" name="lblCity" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" size="3" maxlength="2" name="lblState" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" name="lblEvent" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" name="lblType" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" size="3" maxlength="2" name="lblPlace" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" name="lblHorse" value="" onkeypress="return handleEnter(this, event)">
</td>
<td>
<input type="text" name="lblRider" value="" onkeypress="return handleEnter(this, event)">
</td>
</tr>
<tr>
<td align="center" colspan="8">
<input type="submit">
</td>
</tr>
</table>
</form>
Auto Form (Dynamic)
Reply With Quote
Originally Posted by jbrown1028
Bookmarks