Creating a dynamic form - it writes itself

wxdqz

New Member
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=http://www.webdeveloper.com/forum/archive/index.php/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='http://www.webdeveloper.com/forum/archive/index.php/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='http://www.webdeveloper.com/forum/archive/index.php/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='http://www.webdeveloper.com/forum/archive/index.php/Test'></td>";
NewText = NewText + "</tr></table></div><br>";
document.getElementById("Dependents").innerHTML = NewText;
}
</script>
</head>
<body>
<form method="post">
<input type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Add Dependent" onclick="TestThis()"><br><br>
<div id="Dependents">&nbsp;</div><br>
<input type="submit">
</form>

</body>
</html>
 
Back
Top