在JavaScript .innerHTML更改</form>之后重新获取<form> -element值

时间:2011-02-16 17:11:39

标签: php javascript html post innerhtml

我有一个包含多个文本输入字段和下拉列表的表单。下拉列表的内容由php脚本生成,以匹配数据库结构。我要做的是让用户从下拉列表中选择一个选项,然后根据选择更新表单视图,方法是从数据库中加载一些文本,然后将其放入供用户编辑(AJAX样式,是)。我用php再次生成整个表单,将查询的内容添加到视图中。

问题在于:现在当用户对输入字段的文本内容进行了更改时,他按下了“提交更改”按钮。现在我必须获取文本字段的更改内容以更新数据库中的行。我不知道如何正确地做到这一点。

我正在尝试使用表单的POST方法将更改的内容传递给php脚本,但它无法获取任何内容,因为AJAX样式并没有真正改变页面的HTML。

以下简要介绍了我如何实现这一目标:

页面头:

<head>
<script>
function updateForm(str) {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("divContainingForm").innerHTML=xmlhttp.responseText;
            }
    }

    xmlhttp.open("POST","/scripts/regenerateTheForm.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("id=" + str);
}
</script>
</head>

页面正文:

<form action="/scripts/changeTheOldOne.php" method="post">
    <div id="form">
        <fieldset>
            <label for='list'>Content to edit</label>
            <select id='list' name="list" onchange='updateForm(this.value)' autofocus>
            <?php echo(generateListOptions()); ?> //php-function
            </select>
            </fieldset>
            <fieldset>
                <label for="header">Header</label>
                <input required type="text" id="header" />
            </fieldset>
            <fieldset>
                <label for="body">Plain text</label>
                <textarea required id="body" rows="16" maxlength="1500"></textarea>
            </fieldset>
        </fieldset>
    </div>
</form>

来自regenerateTheFrom.php的函数返回生成的表单,该表单现在在字段中包含文本,JavaScript将其写入页面并更新用户视图。用户现在可以看到检索到的内容并对其进行编辑,但是在提交表单时,changeTheOldOne.php无法从$ _POST数组中获取AJAX更新和用户编辑的表单值。

1 个答案:

答案 0 :(得分:0)

解决了问题!

这只是一个菜鸟的事情。从输入字段中忘记了名称标签,这就是为什么PHP POST无法获取任何信息的原因。我认为id对于php来说已经足够了,但事实并非如此!