PDA

Click to See Complete Forum and Search --> : Dynamically add text element

dejamakan
07-15-2003, 02:45 PM
Hi all. I am trying to dyanmically add a new row of text elements in a form.

ie <td><input type="text" name="firstName"><input type="lastName"></td>

If a new row is needed, then it is dynamically added

Thanks

<trevor />
pyro
07-15-2003, 02:54 PM
What would qualify as "needed"?
dejamakan
07-15-2003, 03:01 PM
Registering a family wity one or more children. If only child, only one set of child text field. If more than one child a dynamically add row for each additional child
pyro
07-15-2003, 03:21 PM
Try something like this:

<script type="text/javascript">
function add() {
var input = document.createElement("<input type=\"text\" name=\"extrachild[]\">")
var br = document.createElement("<br>");
document.getElementById("children").insertBefore(br);
document.getElementById("children").insertBefore(input);

}
</script>
</head>

<body>
<a href="#" onclick="add(); return false;">add</a>
<form>
<div id="children">
<input type="text" name="child">
</div>
</form>
dejamakan
07-16-2003, 07:08 AM
pyro,

Question, I see how it creates the text field but when I view the source its shows only one text box. How can I set it up to capture the data for a database?

Thanks

<trevor />
pyro
07-16-2003, 07:40 AM
Yes, they will not show up when you view the source, but they are there, nontheless. If your server supports PHP, try this:

<?PHP
if (isset($_POST["submit"])) {
echo $_POST["child"]."<br>";
if (isset($_POST["extrachild"])) {
foreach ($_POST["extrachild"] as $val) {
echo $val."<br>";
}
}
}
?>

<html>
<head>

<script type="text/javascript">
function add() {
var input = document.createElement("<input type=\"text\" name=\"extrachild[]\">")
var br = document.createElement("<br>");
document.getElementById("children").insertBefore(br);
document.getElementById("children").insertBefore(input);

}
</script>
</head>

<body>
<a href="#" onclick="add(); return false;">add</a>
<form action="<?PHP echo $_SERVER["PHP_SELF"]; ?>" method="post">
<div id="children">
<input type="text" name="child">
</div>
<input type="submit" name="submit" value="submit">
</form>

</body>
</html>
dejamakan
07-16-2003, 07:55 AM
Pyro
Thanks a lot. I am doing it in Coldfusion

<trevor />
pyro
07-16-2003, 07:58 AM
Well, I don't know CF, but it should be a similar concept...

Cheers! :)
dejamakan
07-16-2003, 08:01 AM
Thanks Pyro.

I am working it now. Cheers
pyro
07-16-2003, 08:04 AM
You're welcome... :)