Trouble with JS form elements
<p>I've built a form with a checkbox and a few text fields and I've set it up so that a user can add additional occurrences of this set of elements.  I've done this by creating a div containing these elements with display set to 'none.'  Javascript then clones and displays this div as needed (once if no $_POST data; once for user click; x times if there is $_POST data).  The Javascript also labels the elements uniquely and sequentially - I've set it up to read in to a serialized array for eventual MySQL insertion - "occurrence[integer][name]".</p>

<p>So far, so good.  Everything behaves as it should and $_POST output is exactly what I need for MySQL.  </p>

<p>My trouble is coming in trying to display the $_POST data within the form elements.  In the code below, I've got a JS variable set to PHP $_POST data - which actually works, so long as I use static code without any variables.  In other words, </p>

<pre><code>newField[i].value ='&lt;?php echo $_POST[occurrence][1][start_date]; ?&gt;';
</code></pre>

<p>does indeed display that value (albeit in every field).
And obviously</p>

<pre><code>newField[i].value ='['+counter+']['+theName+']';
</code></pre>

<p>correctly displays that field's counter and name.  But when I try to combine like so is when I get nothing</p>

<pre><code>newField[i].value ='&lt;?php echo $_POST[occurrence]['+counter+']['+theName+']; ?&gt;';
</code></pre>

<p>Here's my full code:</p>

<pre><code>&lt;?php
        $occ_count = count($_POST['occurrence']);
?&gt;

&lt;script type="text/javascript"&gt;
    var counter = 0;
    function moreFields() { // this function clones the div containing the elements and allows it to display
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i&lt;newField.length;i++) {
            var theName = newField[i].name
            if (theName) {
                newField[i].name = 'occurrence['+counter+']['+theName+']';
            }
            newField[i].value ='&lt;?php echo $_POST[occurrence]['+counter+']['+theName+']; ?&gt;';
        }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
    }
    function addLoadEvent(func) { // this function allows multiple functions to be called on page load
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }

    // this bit determines how many times the moreFields function should be called, based on $_POST data
    var occ_count = "&lt;?php echo $occ_count; ?&gt;";
    if(occ_count == 0) {window.onload = moreFields;}
    else if(occ_count &gt;= 1) {
        for (var n=0;n&lt;occ_count;n++) {
            addLoadEvent(moreFields);
        }
    }
&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h2&gt;JS test2&lt;/h2&gt;

        &lt;div id="readroot" style="display: none"&gt;
            &amp;nbsp;&amp;nbsp;&lt;label for="all_day"&gt;All Day&lt;/label&gt;&amp;nbsp;
            &lt;input type="checkbox" name="all_day"
             onClick="allday(this, this.form)"/&gt;

            &amp;nbsp;&amp;nbsp;&lt;label for="start_date"&gt;From:&lt;/label&gt;&amp;nbsp;
            &lt;input type="text" name="start_date"
            value="" size="15" /&gt;

            &amp;nbsp;&amp;nbsp;&lt;label for="start_time"&gt;&lt;/label&gt;&amp;nbsp;
            &lt;input type="text" name="start_time"
            value="" size="15" /&gt;

            &amp;nbsp;&amp;nbsp;&lt;label for="end_date"&gt;To:&lt;/label&gt;&amp;nbsp;
            &lt;input type="text" name="end_date"
            value="" size="15" /&gt;

            &amp;nbsp;&amp;nbsp;&lt;label for="end_time"&gt;&lt;/label&gt;&amp;nbsp;
            &lt;input type="text" name="end_time"
            value="" size="15" /&gt;

            &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"&gt;Delete&lt;/a&gt;

            &lt;br /&gt;&lt;br /&gt;
            &lt;hr style="border: 0;color: #ddd;background-color: #ddd;height: 1px;"&gt;

        &lt;/div&gt; &lt;!--readroot--&gt;

        &lt;form method="post" &gt;
            &lt;span id="writeroot"&gt;&lt;/span&gt;
            &lt;p id="addnew"&gt;&lt;a href="javascript:moreFields()"&gt;Add New&lt;/a&gt;&lt;/p&gt;

            &lt;input type="submit" value="Send form" /&gt;
        &lt;/form&gt;

&lt;hr&gt;

&lt;?php if($_POST) : ?&gt;
&lt;?php // this is purely for troubleshooting
    echo 'count: '.count($_POST['occurrence']).'&lt;br /&gt;';
    foreach ( $_POST as $varname =&gt; $postitem ) {
        echo 'name: '.$varname.' value: ';
        print_r($postitem);
        echo '&lt;br /&gt;';
    }
?&gt;
&lt;?php endif; ?&gt;
    &lt;/body&gt;
</code></pre>

<p>I can't figure out if this is just a syntax issue or just structurally impossible.  I know JS is supposed to load after PHP but yet I can get that JS variable to produce php $_POST data so there's something going on.  Obviously, I'm confused.  But I'm also open to any other (even completely different) ideas on how to accomplish what I need.</p>

<p>Thanks for any thoughts, ideas or suggestions!</p>
