Dynamic JS Form Variables

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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.something"] but that did not  

<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.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
//numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.innerHTML = "Page Number: <input type=\"text\"  
name=\"pageNumber[]\"><br /><br />Paragraph Number: <input type=\"text\"  
name=\"paragraphNumber[]\"><br /><br />Instructions: <textarea  
name=\"instruction[]\" rows=\"5\" cols=\"80\"></textarea><br /><input  
type=submit value=\"Remove\"onclick=\"removeEvent('"+divIdName+"')\"><br  
/><br />";  

ni.appendChild(newdiv); }

function removeEvent(divNum)
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);


    <input type=submit value="Add Row" id="theValue"  
    <div id="main">
    <form>Page Number: <input type=\"text\"
name=\"pageNumber[]\"><br /><br />Paragraph Number: <input type=\"text\"
name=\"paragraphNumber[]\"><br /><br />Instructions: <textarea
name=\"instruction[]\" rows=\"5\" cols=\"80\"></textarea>

    <div id="myDiv"> </div>




Re: Dynamic JS Form Variables

On Fri, 22 Sep 2006 20:15:59 +0000 (UTC), in comp.lang.php Brad

Quoted text here. Click to load it

This might help you out, watch the wordwrap:
jnorthau@yourpantsyahoo.com.au  : Remove your pants to reply

Re: Dynamic JS Form Variables

Brad Everman wrote:
Quoted text here. Click to load it
<code snipped>

I don't see where you're actually submitting the page other than when  
you remove an item.  If this is the code you're actually using, then  
that's why it isn't showing up.

If this isn't the actually code you're using, you should post that, or,  
more preferably, a link to the page.

And no, PHP knows nothing about DOM.  All it knows are the fields which  
are sent via POST or GET.

Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.

Re: Dynamic JS Form Variables

Brad Everman wrote:
Quoted text here. Click to load it
When I've done this, it's never occurred to me to try and use the same  
names for the inputs in the new rows as the existing rows: I've always  
generated distinct names for each input.
I can see it would be easier to process it the way you are doing it: are  
we sure that it works to add further inputs with the same names as  
existing ones?


Re: Dynamic JS Form Variables

In a contingent reality, Colin Fine possibly said:

Quoted text here. Click to load it

Thanks for the other replies; it was a stupid, stupid problem that was  
fixed after much trial and error. Apparently, Javascript does not like  
forms to be contained within <div> tags outside of where it has control.

To answer your question, it works perfectly. Since I am storing the values  
in an array, dynamically created portions of the form simply append to the  
same array. When you can have up to 200-300 lines of entry, it's a lot  
easier to keep track of them all with one variable name as opposed to  
several hundred.

Site Timeline