PDA

Click to See Complete Forum and Search --> : Creating a dynamic form - it writes itself

westmich
03-11-2003, 01:05 PM
Well, here is my first post. Javascript isn't my strong suit so I was hoping to get some help.

I am trying something a little new for me in that I have a form for user to submit data which is then stored in a database. The new factor is that for each record they want to add, they would click a button and additional fields would appear. Add another record, click the button again. If you click one too many times, then simply click the remove button next to the fields.

The two problems I am running into are 1) add additional fields after the first set appear, 2) how to have javascript write text that includes writing javascript, i.e. namely how to get double quotes within the text.

Here is what I have working so far. Any help is appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script>
function TestThis(){
var NewText = document.getElementById("Dependents").innerHTML;
NewText = "<div><table cellspacing=0 cellpadding=4><tr>";
NewText = NewText + "<td colspan=2><input type=button value=Remove onclick=RemoveMe()></td></tr><tr>";
NewText = NewText + "<td><b>Some Field</b></td>";
NewText = NewText + "<td><input type=text name=Field2 size=25 value='Test'></td>";
NewText = NewText + "</tr><tr>";
NewText = NewText + "<td><b>Some Field</b></td>";
NewText = NewText + "<td><input type=text name=Field1 size=25 value='Test'></td>";
NewText = NewText + "</tr><tr>";
NewText = NewText + "<td><b>Some Field</b></td>";
NewText = NewText + "<td><input type=text name=Field3 size=25 value='Test'></td>";
NewText = NewText + "</tr></table></div><br>";
document.getElementById("Dependents").innerHTML = NewText;
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="Add Dependent" onclick="TestThis()"><br><br>
<div id="Dependents">&nbsp;</div><br>
<input type="submit">
</form>

</body>
</html>
Vladdy
03-11-2003, 01:17 PM
Use DOM methods instead of innerHTML.
Also, as is, you will have the same name for all fields of one type - when form is submitted your server side code will have only the last row of data.
Another approach would be to dump the "form" and submit each row to database in the background without reloading the page...
westmich
03-11-2003, 01:23 PM
Thank-you for your reply:

1) What is the DOM equivelent of 'innerHTML'? I thought 'innerHTML' was the DOM1 standard.

2) I am not to worried about the server-side at this time. I would probably make the names like FirstName_1, FirstName_2, and so on. Then loop through on the server-side using the underscored number.
Vladdy
03-11-2003, 01:30 PM
1. Use document.createElement and node.appendChild
2. If you want to do things efficiently you need to worry about both sides. It makes no sense designing something that works perfectly on the client side, but server can not do anything with it. You have to consider a compromize before you start. Also, your user should be your primary concern and in this regard adding records one by one can be beneficial. What if someone spends an hour creating all those entries on the client side and thier computer crashes (or there is some connection problem) when they try to submit all the data.
westmich
03-11-2003, 02:11 PM
Again, thank-you for your help.

1) Could you provide some example? I am not sure how replace one with the other or how this will solve the original questions.

2) I am very comfortable in making the server-side work which is why I am not focusing on it here. As far as usability, I would have to agree, however, the decision was made over my head.