I have an HTML form that passes arrays of values to PHP. Basically, each
row of the form tracks three separate values for processing. I have a JS
program that will dynamically add (or delete) rows to the form per the
user. The problem is that these values are not passed when the form is
submitted. If I hardcode the rows it works fine, so I know the processing
code isn't the problem. My question is how can I dynamically add form rows
via JS and have their values passed when the form is submitted? I
attempted something like $_POST["document.somet hing"] but that did not
work.
<SNIP>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<script type="text/javascript">
<!--
function addEvent()
{
var ni = document.getEle mentById('myDiv ');
var numi = document.getEle mentById('theVa lue');
var num = (document.getEl ementById("theV alue").value -1)+ 2;
//numi.value = num;
var divIdName = "my"+num+"D iv";
var newdiv = document.create Element('div');
newdiv.setAttri bute("id",divId Name);
newdiv.innerHTM L = "Page Number: <input type=\"text\"
name=\"pageNumb er[]\"><br /><br />Paragraph Number: <input type=\"text\"
name=\"paragrap hNumber[]\"><br /><br />Instructions : <textarea
name=\"instruct ion[]\" rows=\"5\" cols=\"80\"></textarea><br /><input
type=submit value=\"Remove\ "onclick=\"remo veEvent(\'"+div IdName+"\')\">< br
/><br />";
ni.appendChild( newdiv); }
function removeEvent(div Num)
{
var d = document.getEle mentById('myDiv ');
var olddiv = document.getEle mentById(divNum );
d.removeChild(o lddiv);
}
//-->
</script>
</head>
<body>
<input type=submit value="Add Row" id="theValue"
onclick="addEve nt();">
<div id="main">
<form>Page Number: <input type=\"text\"
name=\"pageNumb er[]\"><br /><br />Paragraph Number: <input type=\"text\"
name=\"paragrap hNumber[]\"><br /><br />Instructions : <textarea
name=\"instruct ion[]\" rows=\"5\" cols=\"80\"></textarea>
<div id="myDiv"</div>
</form>
</body>
</html>
</SNIP>
Comment