当内部html更新时,表单不会提交

时间:2017-01-13 20:37:07

标签: javascript php html

我正在创建一个搜索,添加,更新和删除的网页(所有网页都没有任何模态)。该网页专门用于设施维护。添加工作正常。但其余的看起来并不好。每当我添加一个'工具'时,页面就会重新加载(如预期的那样)。该页面从mysql数据库获取数据并将其添加到我的网页内的表格中。该表格中有一个名为' Actions'它包含两个按钮,updatedelete

问题是当我使用innerHTML时。在包含&#39;设施列表的表格的顶部是搜索输入。搜索工作正常(我认为)。搜索使用&#39; POST&#39;方法并访问我的文件中的PHP代码。 PHP代码的任务是搜索数据库中的任何匹配字符串并回显<script> </script>。在这些脚本标记内部是一个代码,我搜索了我想要更新的表的id。然后我换了&amp;添加了内部HTML。内部HTML内部是一个新的表行。表格行内部是一个表单,这些表单内部是<td>个。每当表单(每个表行中的表单)提交时,它应该访问我已经写入的文件中的PHP代码(当页面首次加载时它已经存在)。但每当我点击桌子上的动作按钮时,它什么都不做。它不会触发编写的PHP POST代码。

单击updatedelete按钮可以正常使用IF搜索。单击update将创建另一个包含输入字段的表和一个用于保存更改的按钮。 &#39;按钮保存更改&#39;即使已经在文件中写入了PHP POST代码,它也不起作用。

这是我的代码:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Facilities</title>
        <?php
            include_once("connection.php");
            include_once("pktool-v1.0.php");
        ?>

    </head>

    <body>
        <h1><center>Facilities</center></h1>
        <br>
        <br>
        <div id="addfac">
        <p>Add Facility</p>
        <hr>
            <form method="post" action="facilities.php">
                <br>
                <label name="naFacName">Facility Name: </label>
                <input type="input" name="inputFacName"><br><br>
                <label name="naFacType">Facility Type: </label>
                <select name="naFacSel">
                    <?php
                        $query = "SELECT * FROM tblFacType WHERE " . 
                                                "boolArchive = FALSE;";
                        $array_fetch = mysqli_query($con, $query);

                        while ($row = mysqli_fetch_array($array_fetch)) {
                            $value_added = $row[0];
                            $value_text = $row[1];
                            echo "<option name='naFacType' value='$value_added'>$value_text</option>    ";
                        }
                    ?>
                </select>
                <br><br>
                <label name="naFacAdd">Facility Address: </label>
                <input type="input" name="lot" placeholder="Lot No. or Block">
                <input type="input" name="street" placeholder="Street">
                <input type="input" name="brgy" placeholder="Barangay"><br><br>
                <input type="input" name="city" placeholder="City">
                <input type="input" name="province" placeholder="Province">
                <input type="input" name="region" placeholder="Region">
                <br><br>
                <label name="naFacAddType">Facility Address Type: </label>
                <?php
                    $query = "SELECT * FROM tblAddType WHERE strAddTypeDesc = 'Facility Address' " .
                                                        "AND boolArchive = FALSE;";
                    $array_fetch = mysqli_query($con, $query);
                    //echo "<br> ERROR IS: " . mysqli_error($con) . " <br>";
                    while ($row = mysqli_fetch_array($array_fetch)) {
                        $row_val = $row[0];
                        echo "<label value='$row_val'>$row[1]</label>";
                        echo "<input type='hidden' name='naAddType' value='$row_val'>";
                    }
                ?>
                <br><br>
                <label name="naFacValue">Facility Value (Day): </label>
                <input type="input" name="inputFacValue"><br><br>
                <label name="naFacValueNight">Facility Value (Night): </label>
                <input type="input" name="inputFacValueNight">
                <br><br>
                <center><input type="submit" name="Submit_Facility"></center>
            </form>

            <?php
                if(isset($_POST['Submit_Facility'])) 
                {
                    $add_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "ADD-");
                    $queryStat = true;

                    $lot = $_POST['lot'];
                    $street = $_POST['street'];
                    $brgy = $_POST['brgy'];
                    $city = $_POST['city'];
                    $province = $_POST['province'];
                    $region = $_POST['region'];

                    $fac_name = $_POST['inputFacName'];
                    $fac_val = $_POST['inputFacValue'];
                    $fac_val_night = $_POST['inputFacValueNight'];
                    $fac_type = $_POST['naFacSel'];
                    $add_type = $_POST['naAddType'];

                    $query = "INSERT INTO " . 
                                "tblAddress(strAddID, strRegion, strProvince, strCity, strBarangay, " .  
                                            "strStreet, strLot, intAddTypeID) " . 
                                "VALUES('$add_pk', '$lot', '$street', '$brgy', '$city', '$province', " . 
                                        "'$region', '$add_type');";
                    if (!mysqli_query($con, $query)) {
                        $queryStat = false;
                    }

                    $facloc_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "FACLOC-");
                    $fac_pk = PrimaryKey::prependPK(PrimaryKey::generatePK(), "FAC-");

                    $query = "INSERT INTO " . 
                                "tblFacility(strFacID, strFacName, intFacTypeID, dblFacValDay, dblFacValNight) " . 
                                "VALUES('$fac_pk', '$fac_name', $fac_type, $fac_val, $fac_val_night);";

                    if(!mysqli_query($con, $query)) {
                        $queryStat = false;
                    }

                    $query = "INSERT INTO " . 
                                "tblFacLoc(strFacLocID, strFacID, strAddID) " . 
                                "VALUES('$facloc_pk', '$fac_pk', '$add_pk');";

                    if(!mysqli_query($con, $query)) {
                        $queryStat = false;
                    }

                    if ($queryStat) {
                        echo "<script>alert('Successfully Added!');</script>";
                    } else {
                        $alert_msg = "Error! " . mysqli_error($con);
                        echo "<script>alert('$alert_msg');</script>";
                    }

                }
            ?>
        </div>
        <br>
        <hr>
        <h3><center>All Facilities</center></h3>
        <div>
            <form method='POST' style='text-align:right'>
                <label name='naSearch'>Search:</label>
                <input type='text' name='s_keyword' placeholder='Enter a keyword'>
                <input type='submit' value='Search' name='btnSubmit'>
                <br><br>
            </form>
            <br>

            <table id='tblFacilities'>
                <tr>
                    <th>Facility ID</th>
                    <th>Facility Name</th>
                    <th>Facility Rental Price (Day)</th>
                    <th>Facility Rental Price (Night)</th>
                    <th>Facility Type</th>
                    <th>Facility Location</th>
                    <th colspan=2>Actions</th>
                </tr>

                <?php
                    $query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " . 
                                    "b.strFacTypeDesc, " . 
                                    "d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " . 
                                    "d.strRegion " . 
                            "FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " . 
                            "WHERE a.intFacTypeID = b.intFacTypeID AND " . 
                                    "a.strFacID = c.strFacID AND " . 
                                    "c.strAddID = d.strAddID AND " . 
                                    "a.boolArchive = FALSE;";

                    $array_fetch = mysqli_query($con, $query);

                    while ($tuple = mysqli_fetch_array($array_fetch)) {
                        $fac_ID = $tuple[0];
                        $fac_name = $tuple[1];
                        $fac_val = $tuple[2];
                        $fac_val_night = $tuple[3];
                        $fac_type = $tuple[4];
                        $fac_add = $tuple[5] . " " . $tuple[6] . " " . $tuple[7] . " " . $tuple[8] . " " . 
                                        $tuple[9] . " " . $tuple[10] . " " . $tuple[11] . " ";

                        echo "<tr> " . 
                                "<form method='post' > " . 
                                    "<td><input type='hidden' name='fac_id' value='$fac_ID'>$fac_ID</td> " . 
                                    "<td><input type='hidden' name='fac_name' value='$fac_name'>$fac_name</td> " . 
                                    "<td><input type='hidden' name='fac_val' value='$fac_val'>$fac_val</td> " . 
                                    "<td><input type='hidden' name='fac_val_night' value='$fac_val_night'>$fac_val_night</td> " .
                                    "<td><input type='hidden' name='fac_type' value='$fac_type'>$fac_type</td> " .  
                                    "<td><input type='hidden' name='fac_add' value='$fac_add'>$fac_add</td> " . 
                                    "<td><input type='submit' name='naUpd' value='Update'></td> " . 
                                    "<td><input type='submit' name='naDel' value='Delete'></td> " . 
                                "</form> " . 
                            "</tr>";
                    }
                ?>

            </table>

            <br>
            <br>

            <div style="display: 'solid'">
                <table id="tblfaci">
                    <tr>
                        <th>Facility ID</th>
                        <th>Facility Name</th>
                        <th>Facility Rental Price (Day)</th>
                        <th>Facility Rental Price (Night)</th>
                        <th>Facility Type</th>
                        <th colspan=7>Facility Location</th>
                        <th>Action</th>
                    </tr>
                </table>
            </div>

            <?php
                if (isset($_GET['btnSubmit'])) {
                    $keyword_q = $_GET['s_keyword'];
                    $query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " . 
                                    "b.strFacTypeDesc, " . 
                                    "d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " . 
                                    "d.strRegion " . 
                            "FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " . 
                            "WHERE a.intFacTypeID = b.intFacTypeID AND " . 
                                    "a.strFacID = c.strFacID AND " . 
                                    "c.strAddID = d.strAddID AND " . 
                                    "a.boolArchive = FALSE AND (" .
                                        "a.strFacID LIKE '%$keyword_q%' OR " . 
                                        "a.strFacName LIKE '%$keyword_q%' OR " .  
                                        "b.strFacTypeDesc LIKE '%$keyword_q%' OR " . 
                                        "d.strUnit LIKE '%$keyword_q%' OR " . 
                                        "d.strLot LIKE '%$keyword_q%' OR " . 
                                        "d.strStreet LIKE '%$keyword_q%' OR " . 
                                        "d.strBarangay LIKE '%$keyword_q%' OR " . 
                                        "d.strCity LIKE '%$keyword_q%' OR " . 
                                        "d.strProvince LIKE '%$keyword_q%' OR " . 
                                        "a.dblFacValDay = " . (int)$keyword_q . " OR " . 
                                        "a.dblFacValNight = " . (int)$keyword_q . " OR " . 
                                        "d.strRegion LIKE '%$keyword_q%'" . 
                                    ");";

                    $array_fetch = mysqli_query($con, $query);

                    echo "<script>" . 
                            "var tblFac = document.getElementById('tblFacilities'); " .
                            "tblFac.innerHTML = \"<tr> " .
                                            "<th>Facility ID</th> " .
                                                    "<th>Facility Name</th> " . 
                                                "<th>Facility Rental Price (Day)</th> " .
                                                "<th>Facility Rental Price (Night)</th> " .
                                                "<th>Facility Type</th> " .
                                                "<th>Facility Location</th> " .
                                                "<th colspan=2>Actions</th> " .
                                            "</tr>\";" . 
                         "</script>"; 

                    while ($tuple = mysqli_fetch_array($array_fetch)) {
                        $fac_ID = $tuple[0];
                        $fac_name = $tuple[1];
                        $fac_val = $tuple[2];
                        $fac_val_night = $tuple[3];
                        $fac_type = $tuple[4];
                        $fac_add = $tuple[5] . " " . $tuple[6] . " " . $tuple[7] . " " . $tuple[8] . " " . 
                                        $tuple[9] . " " . $tuple[10] . " " . $tuple[11] . " ";


                        echo "<script>" . 
                                "var tblFac = document.getElementById('tblFacilities'); " .
                                "tblFac.innerHTML += \"" . 
                                 "<tr> " . 
                                     "<form method='post' > " . 
                                        "<td><input type='hidden' name='fac_id' value='$fac_ID'>$fac_ID</td> " . 
                                        "<td><input type='hidden' name='fac_name' value='$fac_name'>$fac_name</td> " . 
                                        "<td><input type='hidden' name='fac_val' value='$fac_val'>$fac_val</td> " . 
                                        "<td><input type='hidden' name='fac_val_night' value='$fac_val_night'>$fac_val_night</td> " .
                                        "<td><input type='hidden' name='fac_type' value='$fac_type'>$fac_type</td> " . 
                                        "<td><input type='hidden' name='fac_add' value='$fac_add'>$fac_add</td> " . 
                                        "<td><input type='submit' name='naUpd' value='Update'></td> " . 
                                        "<td><input type='submit' name='naDel' value='Delete'></td " . 
                                     "</form> " . 
                                 "</tr>\";" . 
                             "</script>";
                    }
                }
            ?>

            <?php
                if (isset($_POST['naUpd'])) {
                    echo "<script>alert('UPDATE');</script>";
                    $id = $_POST['fac_id'];
                    $name = $_POST['fac_name'];
                    $val = $_POST['fac_val'];
                    $val_n = $_POST['fac_val_night'];
                    $type = $_POST['fac_type'];

                    $query = "SELECT a.strFacID, a.strFacName, a.dblFacValDay, a.dblFacValNight, " . 
                                    "b.strFacTypeDesc, " . 
                                    "d.strUnit, d.strLot, d.strStreet, d.strBarangay, d.strCity, d.strProvince, " . 
                                    "d.strRegion " . 
                            "FROM tblFacility a, tblFacType b, tblFacLoc c, tblAddress d " . 
                            "WHERE a.intFacTypeID = b.intFacTypeID AND " . 
                                    "a.strFacID = c.strFacID AND " . 
                                    "c.strAddID = d.strAddID AND " . 
                                    "a.boolArchive = FALSE AND " . 
                                    "a.strFacID = '$id';";

                    $array_fetch = mysqli_query($con, $query); 

                    while ($tuple = mysqli_fetch_array($array_fetch)) {
                        $lot = $tuple[5];
                        $street = $tuple[6];
                        $unit = $tuple[7];
                        $barangay = $tuple[8];
                        $city = $tuple[9];
                        $province = $tuple[10];
                        $region = $tuple[11];

                        $innerCode = "<script>".
                                "var tblfaci = document.getElementById('tblfaci'); " .
                                "tblfaci.innerHTML += \"" .
                                "<tr><form method='post' action='facilities.php'> ".
                                "<td><input type='text' name = 'upd_fac_id' value = '$id' readonly></td> ".
                                "<td><input type='text' name = 'upd_fac_name' value = '$name'></td> ".
                                "<td><input type='text' name = 'upd_fac_val' value = '$val'></td> ".
                                "<td><input type='text' name = 'upd_fac_val_night' value = '$val_n'></td> ";

                        $innerCode .= "<td> ";
                            $innerCode .= "<select name='updFacType'>";

                                $query2 = "SELECT * FROM tblFacType WHERE " . 
                                                "boolArchive = FALSE;";
                                $array_fetch = mysqli_query($con, $query2);

                                while ($row = mysqli_fetch_array($array_fetch)) {
                                    $value_added = $row[0];
                                    $value_text = $row[1];
                                    $innerCode .= "<option name='naUpdFacType' value='$value_added'>$value_text</option>";
                                }

                            $innerCode .= "</select>";
                        $innerCode .= "</td>";      

                        $innerCode .= "<td><input type='text' name = 'upd_lot' value = '$lot'></td>".
                                "<td><input type='text' name = 'upd_street' value = '$street'></td>".
                                "<td><input type='text' name = 'upd_unit' value = '$unit'></td>".
                                "<td><input type='text' name = 'upd_barangay' value = '$barangay'></td>".
                                "<td><input type='text' name = 'upd_city' value = '$city'></td>".
                                "<td><input type='text' name = 'upd_province' value = '$province'></td>".
                                "<td><input type='text' name = 'upd_region' value = '$region'></td>".
                                "<td><input type='submit' value = 'Save' name = 'btnSaveUpdate'>".
                                "</form></tr>\";".
                            "</script>";

                        echo $innerCode;
                    }
                }
                if (isset($_POST['naDel'])) {
                    $del_pk = $_POST['fac_id'];

                    $query = "UPDATE tblFacility a, tblFacLoc b, tblAddress c " . 
                                "SET a.boolArchive = TRUE, b.boolArchive = TRUE, c.boolArchive = TRUE " . 
                                "WHERE a.strFacID = b.strFacID AND " . 
                                        "c.strAddID = b.strAddID AND " . 
                                        "a.strFacID = '$del_pk';";

                    if(!mysqli_query($con, $query)) {
                        $alert_msg = "Error! " . mysqli_error($con);
                        echo "<script>alert('$alert_msg');</script>";
                    } else {
                        echo "<script>alert('Successfully Removed!');</script>";
                    }

                    header("Location: facilities.php");
                }

            ?>

            <?php
                if (isset($_POST['btnSaveUpdate'])) {

                    $pk_id = $_POST['upd_fac_id'];
                    $edit_fac_type = $_POST['updFacType'];
                    $upd_fac_name = $_POST['upd_fac_name'];

                    $upd_fac_val = $_POST[''];
                    $upd_fac_val_night = $_POST[''];

                    $upd_region = $_POST['upd_region'];
                    $upd_province = $_POST['upd_province'];
                    $upd_city = $_POST['upd_city'];
                    $upd_barangay = $_POST['upd_barangay'];
                    $upd_street = $_POST['upd_street'];
                    $upd_lot = $_POST['upd_lot'];


                    $query = "UPDATE tblFacility a, tblAddress b, tblFacLoc c " . 
                                "SET a.intFacTypeID = (SELECT intFacTypeID " . 
                                                        "FROM tblFacType " . 
                                                        "WHERE strFacTypeDesc = '$edit_fac_type'), " . 
                                    "a.strFacName = '$upd_fac_name', " . 
                                    "a.dblFacValDay = $upd_fac_val, " . 
                                    "a.dblFacValNight = $upd_fac_val_night, " . 
                                    "b.strRegion = '$upd_region', " . 
                                    "b.strProvince = '$upd_province', " . 
                                    "b.strCity = '$upd_city', " . 
                                    "b.strBarangay = '$upd_barangay', " . 
                                    "b.strStreet = '$upd_street', " . 
                                    "b.strLot = '$upd_lot' " . 
                                "WHERE a.strFacID = c.strFacID AND " .
                                    "c.strAddID = b.strAddID AND " .
                                    "a.strFacID = '$pk_id';";

                    if(!mysqli_query($con, $query)) {
                        $alert_msg = "Error! " . mysqli_error($con);
                        echo "<script>alert('$alert_msg');</script>";
                    } else {
                        echo "<script>alert('Successfully Updated!!');</script>";

                        header("Location: facilities.php");
                    }
                }
            ?>
        </div>
    </body>
</html>

我不确定innerHTML是否找不到它发布的PHP代码,或者POST无法找到innerHTML或其他内容。我注意到每当我使用innerHTML并使用它添加表单时,我认为它不会提交表单。我该怎么办?

1 个答案:

答案 0 :(得分:4)

问题在于,HTML元素的嵌套是错误的,因为您将<form>作为<tr>的孩子。

您可以做的是将整个表单放在一个<tr>中。这样可以正常工作,因为所有输入都是隐藏的输入,因此它们不必在单独的<td>中。例外情况是提交按钮,但看起来可以将它们放在最后一列中。

echo "<tr> " . 
        "<td>$fac_ID</td> " . 
        "<td>$fac_name</td> " . 
        "<td>$fac_val</td> " . 
        "<td>$fac_val_night</td> " .
        "<td>$fac_type</td> " .  
        "<td>$fac_add</td> " . 
        "<td><form method="post">" .
            "<input type='hidden' name='fac_id' value='$fac_ID'>" .
            "<input type='hidden' name='fac_name' value='$fac_name'>" .
            "<input type='hidden' name='fac_val' value='$fac_val'>" .
            "<input type='hidden' name='fac_val_night' value='$fac_val_night'>" .
            "<input type='hidden' name='fac_type' value='$fac_type'>" .
            "<input type='hidden' name='fac_add' value='$fac_add'>" .
            "<input type='submit' name='naUpd' value='Update'> " . 
            "<input type='submit' name='naDel' value='Delete'>" .
        "</form></td> " . 
    "</tr>";