Javascript 动态表单部件-无jQuery（首选，但必要时将使用）

各位下午好！长期读者，第一次海报-如果我在错误的论坛，请提前道歉，等等。因此，我知道我想要完成什么，但不清楚如何实现，所以我正在寻求你们这些优秀人士的帮助！：

我正在为一家使用HTML5、PHP、MySQL、CSS、AJAX和普通JavaScript的公司编写一个web应用程序。我不熟悉PHP和AJAX，还在学习，但到目前为止一切都很好。现在我有了一个好主意，为这个应用程序创建一个新的学员向导，以简化新学员流程。它应该是动态的，我认为应该使用AJAX。以下是流程：

一,。使用下拉列表加载页面选择“族”或“未知” 2a。如果选择了族，则在第2节中显示族数据 2b。如果选择“未知”，则在第2节中显示空白的族添加表单 4.如果显示空白的族表单，则用户将其填写为“尚未提交” 5.一旦家庭被划分，显示空白的添加学生表格 6.如果必须填写家庭表格，提交按钮将添加家庭和学生信息，如果家庭已经存在，则仅添加学生信息

在我的代码中，我有一个到目前为止只与这个问题相关的减包含和这样的代码：

<?php
    $familyselectquery = "SELECT familyID, familyMotherName, familyFatherName from tblFamily";
        $familyselectqueryresult = $mysqli->query($familyselectquery);
?>
    <script>
        function PopulateFamily(famid) {
            var xmlhttp;
            if (famid == "")
            {
                document.getElementById("newstufam").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("newstufam").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "newstufam.php?famid=" + id, true);
            xmlhttp.send();
        }
    </script>
    <form method="post" action="newstudent.php">
        <fieldset class="fieldset">
            <legend class="legend">Add Student Wizard</legend>
            <fieldset class="fieldset2">
                <legend class="legend">Step 1: Check For Family In Database</legend>
                <label for "familyID" class="label-l">Select Family Name Or "Unlisted": </label><select name='familyID' class="input-l" onchange="PopulateFamily(**???**)">
                    <option value="0">-- Select Family --</option>
                    <option value="unl">Unlisted</option>
                    <?php
                    while ($row = $familyselectqueryresult->fetch_object()) {
                        $ID = $row->familyID;
                        $MName = $row->familyMotherName;
                        $DName = $row->familyFatherName;

                        if ($MName == "") {
                            $Name = $DName;
                        } else {
                            $Name = $MName;
                        }

                        list($fname, $lname) = explode(' ', $Name, 2);

                        echo '<option value="' . $ID . '">' . $lname . ' (' . $fname . ') </option>';
                    }
                    ?>
                </select>
            </fieldset>
            <div id="newstufam"></div>
        </fieldset>
    </form>

因此，我需要从下拉列表中获取所选的familyid到我的onchange函数，以便我的应用程序知道是加载新的家庭表单，还是只显示数据。我想我可能会在JavaScript中做出这个决定，但这对下一个问题没有帮助，也没有真正回答如何将它放到onchange函数中。从这里开始，我需要弄清楚如何将该ID传递到下一部分，以便在新学生加入新家庭时，应用程序知道如何通过我的查询关联数据库中的2。有人能帮我理解如何完成这两项吗？一旦我理解了这2条，我想我将能够再次离开并完成这一页的编码

提前非常感谢大家

小丑1977

最终工作代码 所以我在下面的评论中得到了肖恩的帮助。以下是我的最终工作代码：

<script>
        function PopulateFamily(famid) {
            var xmlhttp;

            if (famid == "")
            {
                document.getElementById("newstufam").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("newstufam").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "newstufam.php?famid=" + famid, true);
            xmlhttp.send();
        }
    </script>
    <?php
        $familyselectquery = "SELECT familyID, familyMotherName, familyFatherName from tblFamily";
        $familyselectqueryresult = $mysqli->query($familyselectquery);
    ?>
    <form method="post" action="newstudent.php">
        <fieldset class="fieldset">
            <legend class="legend">Add Student Wizard</legend>
            <fieldset class="fieldset2">
                <legend class="legend">Step 1: Check For Family In Database</legend>
                <label for "familyID" class="label-l">Select Family Name Or "Unlisted": </label><select name='familyID' id="familyID" class="input-l" onchange="PopulateFamily(this.options[this.selectedIndex].value);">
                    <option value="0">-- Select Family --</option>
                    <option value="unl">Unlisted</option>
                    <?php
                    while ($row = $familyselectqueryresult->fetch_object()) {
                        $ID = $row->familyID;
                        $MName = $row->familyMotherName;
                        $DName = $row->familyFatherName;

                        if ($MName == "") {
                            $Name = $DName;
                        } else {
                            $Name = $MName;
                        }

                        list($fname, $lname) = explode(' ', $Name, 2);

                        echo '<option value="' . $ID . '">' . $lname . ' (' . $fname . ') </option>';
                    }
                    ?>
                </select>
            </fieldset>
            <div id="newstufam"></div>
        <input type='submit' value='Submit' class="button" /> <input type="reset" value="Cancel" class="button" />
        <input type='hidden' value='1' name='submitted' />
        </fieldset>
    </form>

---

使用javascript，您可以使用此->然后在函数->函数PopulateFamilysel中使用{var famid=sel.value。函数PopulateFamilysel中的sel可以是任何随机参数，我使用sel提醒我这是一个选择输入。然后你只需获得值sel.value并将其设置为famid。谢谢Sean。我带着这个想法运行，做了一些研究和实验，现在一切都正常了。更新了编辑问题abov中的代码E