Welcome to WebmasterWorld Guest from 3.94.129.211

Forum Moderators: open

Message Too Old, No Replies

Tables in forms with Javascript

     
8:52 am on May 3, 2007 (gmt 0)

New User

10+ Year Member

joined:May 2, 2007
posts: 17
votes: 0


I've created a registration page with several rows in it. The rows are fname, sname, email, phone etc. There is also a button on the page to add a completely new row containing the same inputs. The new row is added dynamically using JS. I am also using arrays in forms meaning that the original input element looks like this:


<input type="text" name="fnames[]" value="0" />

The problem lies in passing the values back to PHP. Any original HTML fields added, like the above are received fine, but any added using the dynamic javascript are not retrieved by PHP.

After much debugging I have come to the conclusion it is the use of tables in forms but I don't know why. I have made two tester scripts and the one without the table layouts receives all inputs, html or dynamic js fine, but the one with the tables only receives the html ones.

If you could look at my dynamic JS code and tell me what's wrong with it I'd very much appreciate it (particularly the forms bit.)

What should happen here is that all the form elements are printed back, even the dynamic ones.

----------------Tableless Version (works)--------------


<?

if(isset($_POST['submit']))
{
foreach($_POST['animals'] as $anim => $a)
{
echo $anim.' '.$a.'<br />';
}
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
<!--
var curUser=3;

function add_row()
{
var af=document.getElementById('anim_tab');

//First Name
var inone=document.createElement("input");
inone.name="animals["+curUser+"]";
inone.type="text";
inone.value="";
//Append the cells to the row
var myp=document.createElement('p');

af.appendChild(inone);
af.appendChild(myp);
curUser++;
}

-->
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form method="post" action="" id="anim_form">

<div style="border:0;" id="anim_tab">
<?
for($i=0;$i<3;$i++)
{
echo "<input type=\"text\" name=\"animals[]\" style=\"width=400px;\" /><p />\n";
}
?>
</div>
<input type="button" name="add" value="Add" onClick="add_row();" />
<input type="submit" name="submit" value="submit" />
</form>

</body>
</html>

-------Table Version - Doesn't work in Opera or FF.-------


<?

if(isset($_POST['submit']))
{
foreach($_POST['animals'] as $anim => $a)
{
echo $anim.' '.$a.'<br />';
}
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
<!--
var curUser=3;

function add_row()
{
var af=document.getElementById('anim_tab');

var lr = af.rows.length;
var row = af.insertRow(lr);

var td1=row.insertCell(0);

//First Name
var inone=document.createElement("input");
inone.name="animals["+curUser+"]";
inone.type="text";

td1.appendChild(inone);
curUser++;
}

-->
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form method="post" action="" id="anim_form">
<table id="anim_tab">
<?
for($i=0;$i<3;$i++)
{
echo "<tr><td><input type=\"text\" name=\"animals[]\" style=\"width=400px;\" /></td></tr>";
}
?>

<input type="button" name="add" value="Add" onClick="add_row();" />
<input type="submit" name="submit" value="submit" />
</table>
</form>

</body>
</html>

PS. BB Code tags don't seem to look any different here, am I using them right?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members