Trouble with JS form elements_问答_开发者_运维开发者技术经验分享

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]".

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

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,

newField[i].value ='<?php echo $_POST[occurrence][1][start_date]; ?>';

does indeed display that value (albeit in every field). And obviously

newField[i].value ='['+counter+']['+theName+']';

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

newField[i].value ='<?php echo $_POST[occurrence]['+counter+']['+theName+']; ?>';

Here's my full code:

<?php
        $occ_count = count($_POST['occurrence']);
?>

<script type="text/javascript">
    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<newField.length;i++) {
            var theName = newField[i].name
            if (theName) {
                newField[i].name = 'occurrence['+counter+']['+theName+']';
            }
            newField[i].value ='<?php echo $_POST[occurrence]['+counter+']['+theName+']; ?>';
        }
        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 = "<?php echo $occ_count; ?>";
    if(occ_count == 0) {window.onload = moreFields;}
    else if(occ_count >= 1) {
        for (var n=0;n<occ_count;n++) {
            addLoadEvent(moreFields);
        }
    }
</script>
    </head>
    <body>
        <h2>JS test2</h2>

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

            &nbsp;&nbsp;<label for="start_date">From:</label>&nbsp;
            <input type="text" name="start_date"
            value="" size="15" />

            &nbsp;&nbsp;<label for="start_time"></label>&nbsp;
            <input type="text" 开发者_如何转开发name="start_time"
            value="" size="15" />

            &nbsp;&nbsp;<label for="end_date">To:</label>&nbsp;
            <input type="text" name="end_date"
            value="" size="15" />

            &nbsp;&nbsp;<label for="end_time"></label>&nbsp;
            <input type="text" name="end_time"
            value="" size="15" />

            &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</a>

            <br /><br />
            <hr style="border: 0;color: #ddd;background-color: #ddd;height: 1px;">

        </div> <!--readroot-->

        <form method="post" >
            <span id="writeroot"></span>
            <p id="addnew"><a href="javascript:moreFields()">Add New</a></p>

            <input type="submit" value="Send form" />
        </form>

<hr>

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

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.

Thanks for any thoughts, ideas or suggestions!

As @Mark states, you're trying to concatenate server-side PHP with client-side Javascript - this simply isn't going to work. Everything within your <?php and ?> tags will be evaluated before the page is ever sent to the client - so the actual PHP code will be this:

echo $_POST['occurrence']['+counter+']['+theName+'];

I'd guess this actually tries to look up keys called '+counter+' and ``'+theName+' in your PHP array, and of course these don't exist.

There are a couple of ways to do this right - my guess is that the easiest would be to dump the PHP into a javascript variable:

var postOccurrence = <?php echo json_encode($_POST['occurrence']); ?>;

Then update your code in the Javascript loop to:

newField[i].value = postOccurrence[counter][theName];

The other easy option would be to do the loop in PHP, rather than Javascript, and have it output static Javascript code for fields from 0 to n.

Trouble with JS form elements

精彩评论

关注公众号

热门标签

图文推荐

Trouble with JS form elements

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：