JS表单元素的问题

时间:2011-03-30 19:35:26

标签: php javascript

我已经构建了一个带有复选框和几个文本字段的表单,并且我已经对其进行了设置,以便用户可以添加此组元素的其他实例。我这样做是通过创建一个包含这些元素的div,显示设置为'none'。然后Javascript克隆并根据需要显示此div(如果没有$ _POST数据则一次;一次用于用户点击;如果有$ _POST数据则x次)。 Javascript还唯一且顺序地标记元素 - 我已将其设置为读入序列化数组以便最终插入MySQL - “occurrence [整数] [名称]”。

到目前为止,这么好。一切都表现得应该和$ _POST输出正是我需要的MySQL。

我的麻烦在于尝试在表单元素中显示$ _POST数据。在下面的代码中,我有一个JS变量设置为PHP $ _POST数据 - 这实际上是有效的,只要我使用没有任何变量的静态代码。换句话说,

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

确实显示了该值(尽管在每个字段中)。 显然

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

正确显示该字段的计数器和名称。但是,当我尝试结合这样的时候,当我什么都没得到的时候

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

这是我的完整代码:

<?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>

我无法弄清楚这只是一个语法问题还是结构上不可能。我知道JS应该在PHP之后加载,但我可以得到JS变量来生成php $ _POST数据,所以有一些事情正在发生。显然,我很困惑。但我也对任何其他(甚至完全不同的)关于如何完成我需要的想法持开放态度。

感谢您的任何想法,想法或建议!

1 个答案:

答案 0 :(得分:2)

正如@Mark所述,您正在尝试将服务器端PHP与客户端Javascript连接起来 - 这根本不起作用。在将页面发送到客户端之前,将评估<?php?>标记内的所有内容 - 因此实际的PHP代码将是:

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

我猜这实际上是试图在PHP数组中查找名为'+counter+'和``'+ theName +'的键,当然这些键不存在。

有几种方法可以做到这一点 - 我的猜测是最简单的方法是将PHP转储到javascript变量中:

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

然后将Javascript循环中的代码更新为:

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

另一个简单的选择是在PHP中执行循环,而不是Javascript,并让它输出从0到n的字段的静态Javascript代码。