javascript - 表单提交后保留数据库查询结果

标签 javascript php jquery html forms

我有三个带有动态选项表单数据库的下拉框。当页面打开时,他们会将数据加载到所有三个下拉框中。如果从 Box-1、Box-2、Box-3 中选择一个选项,则选项将根据 Box-1 上的选择进行更新/缩小范围。当选择 Box-2 选项时,会发生相同的操作。

但是当我提交表单时,Box-2 和 Box-3 中的所有缩小选项都会被释放,并且所有选项都会显示为启动该页面时的样子。请提供一些建议,以在提交表单后保留 box-2 和 box-3 上的动态更新选项。

索引:

<?php
error_reporting(0);
include("config.php");
?>
<html>
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

        function changeSecond(agm_branch){
            var xmlhttp;
            var designation = document.getElementById("designation").value;
            var office = document.getElementById("office").value;
            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){
                    var res=xmlhttp.responseText;
                    document.getElementById("designation").innerHTML=res;
                }
            }

            xmlhttp.open("GET","second_script.php?first="+agm_branch+"&second="+designation+"&third="+office,true);
            xmlhttp.send();

        }

        function changeThird(designation){
            var xmlhttp;
            var agm_branch = document.getElementById("agm_branch").value;
            var office = document.getElementById("office").value;

            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){
                    var res=xmlhttp.responseText;
                    document.getElementById("office").innerHTML=res;
                }
            }

            xmlhttp.open("GET","third_script.php?first="+agm_branch+"&second="+designation+"&third="+office,true);
            xmlhttp.send();
        }

</script>

<style>

</style>

<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
<style>
BODY, TD {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
}
</style>    
</head>


<body>
<section class="register">

    <h1> Contact Book Search</h1>

    <div class="reg_section personal_info">

    <form id="form1" name="form1" method="POST" action="">
        <table width="1300" align="center" cellspacing="3" class="btable">

            <tr>
                <td width="179">NAME LOOKS LIKE:</td>
              <td width="1100"><input type="text" name="lst_name" id="lst_name" value="<?php echo stripcslashes($_REQUEST["lst_name"]); ?>" /></td>
            </tr>

            <tr>
                <td width="179" valign="middle"> AGM BRANCH: </td>
                <td width="1100">

                    <select id="agm_branch" name="agm_branch" onChange="changeSecond(this.value)">
                        <option value="">--</option>
                        <?php
                        $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY agm_branch ORDER BY agm_branch";
                        $sql_result1 = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
                        while ($row = mysql_fetch_assoc($sql_result1)) {
                        echo "<option value='".$row["agm_branch"]."'".($row["agm_branch"]==$_REQUEST["agm_branch"] ? " selected" : "").">".$row["agm_branch"]."</option>";}
                        ?>  
                    </select>
                </td>
            </tr>

            <tr>    
                <td width="179" valign="middle">DESIGNATION:</td>
                <td width="1100">


                    <select id="designation" name="designation" onChange="changeThird(this.value)">
                        <option value="">--</option>
                        <?php
                        $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY designation ORDER BY designation";
                        $sql_result1 = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
                        while ($row = mysql_fetch_assoc($sql_result1)) {
                        echo "<option value='".$row["designation"]."'".($row["designation"]==$_REQUEST["designation"] ? " selected" : "").">".$row["designation"]."</option>";}
                        ?>
                    </select>
                </td>
            </tr>

            <tr>
                <td width="179" valign="middle">OFFICE:</td>
                <td width="1100">


                    <select id="office" name="office">
                        <option value="">--</option>
                        <?php
                        $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY office ORDER BY office";
                        $sql_result1 = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
                        while ($row = mysql_fetch_assoc($sql_result1)) {
                        echo "<option value='".$row["office"]."'".($row["office"]==$_REQUEST["office"] ? " selected" : "").">".$row["office"]."</option>";}
                        ?>
                    </select>
                </td>

                <td><input type="submit" name="button" id="button" value="Filter" /></td>

                <td>
                </label><a href=""> reset</a>
                </td>

            </tr>

        </table>




    </form>

    </section>
    </div>


    <table align="center" width="1300" border="1" cellspacing="1" cellpadding="3" class="btable">

        <tr align="center" valign="middle">
            <td width="130" bgcolor="#CCCCCC"><strong>Last Name</strong></td>
            <td width="130" bgcolor="#CCCCCC"><strong>Calling Name</strong></td>
            <td width="180" bgcolor="#CCCCCC"><strong>Designation</strong></td>
            <td width="100" bgcolor="#CCCCCC"><strong>AGM Branch</strong></td>
            <td width="220" bgcolor="#CCCCCC"><strong>DGM Branch</strong></td>
            <td width="250" bgcolor="#CCCCCC"><strong>Office</strong></td>
        </tr>


        <?php
            if ($_REQUEST["lst_name"]<>'') {$search_last_name = " AND (last_name LIKE '%".mysql_real_escape_string($_REQUEST["lst_name"])."%' OR calling_name LIKE '%".mysql_real_escape_string($_REQUEST["lst_name"])."%')";}
            if ($_REQUEST["agm_branch"]<>'') {$search_agm_branch = " AND agm_branch='".mysql_real_escape_string($_REQUEST["agm_branch"])."'";}
            if ($_REQUEST["designation"]<>'') {$search_designation = " AND designation='".mysql_real_escape_string($_REQUEST["designation"])."'";}
            if ($_REQUEST["office"]<>'') {$search_office = " AND office='".mysql_real_escape_string($_REQUEST["office"])."'";}

            if ($_REQUEST["lst_name"]<>''OR $_REQUEST["agm_branch"]<>''OR $_REQUEST["designation"]<>'' OR $_REQUEST["office"]<>'') {
                $sql1 = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE id>0".$search_last_name.$search_agm_branch.$search_designation.$search_office;


                $sql_result = mysql_query ($sql1, $connection ) or die ('request "Could not execute SQL query" '.$sql1);}
            if (mysql_num_rows($sql_result)>0) 
            {
                while ($row = mysql_fetch_assoc($sql_result)) 
                {
        ?>

                <tr valign="middle">
                    <td><?php echo $row["last_name"]; ?></td>
                    <td><?php echo $row["calling_name"]; ?></td>
                    <td><?php echo $row["designation"]; ?></td>
                    <td><?php echo $row["agm_branch"]; ?></td>
                    <td><?php echo $row["dgm_branch"]; ?></td>
                    <td><?php echo $row["office"]; ?></td>
                </tr>
                <?php
                }
            } 
            else 
            {
                ?>
            <tr valign="middle"><td colspan="6">No results found.</td></tr>

            <?php   
            }
            ?>
    </table>
</body>
</html>

第二个脚本.php:

<?php
    $first=$_GET["first"];
    $second=$_GET["second"];
    $third=$_GET["third"];
    //echo $first;
    $link = mysql_connect("localhost", "root", "");

   if (!$link)
   {
      die('Could not connect: ' . mysql_error());
   }
   if (mysql_select_db("ahamed", $link)){

        if ($first<>'') {$query1="SELECT * FROM data WHERE id>0 AND agm_branch='" .$first. "' GROUP BY designation ORDER BY designation";}
        else    {$query1= "SELECT * FROM data GROUP BY designation ORDER BY designation";}

      $data1=mysql_query($query1);

?>


    <select id="designation" name="designation">
    <option value="">--<option>
    <?php
    while($row = mysql_fetch_assoc($data1))
    {echo "<option value='".$row["designation"]."'".($row["designation"]==$second ? " selected" : "")."'>".$row["designation"]."</option>";}}
    ?>
    </select>

third_script.php:

<?php
    $first=$_GET["first"];
    $second=$_GET["second"];
    $third=$_GET["third"];
    echo $first;
   $link = mysql_connect("localhost", "root", "");

   if (!$link)
   {
      die('Could not connect: ' . mysql_error());
   }
   if (mysql_select_db("ahamed", $link)){


                if ($first<>'' && $second<>'') {$query= "SELECT * FROM data WHERE id>0 AND agm_branch='" .$first. "' AND designation='" .$second. "' GROUP BY office ORDER BY office";}
                else if ($first<>'' && $second=='') {$query= "SELECT * FROM data WHERE id>0 AND agm_branch='" .$first. "' GROUP BY office ORDER BY office";}
                else if ($first=='' && $second<>'') {$query= "SELECT * FROM data WHERE id>0 AND designation='" .$second. "' GROUP BY office ORDER BY office";}
                else    {$query= "SELECT * FROM data GROUP BY office ORDER BY office";}

        $data = mysql_query($query);

?>

    <select id="office" name="office">
    <option value="">--<option>

    <?php
    while($row = mysql_fetch_assoc($data))
    {echo "<option value='".$row["office"]."'>".$row["office"]."</option>";}}
    ?>
    </select>

最佳答案

实际上您正在使用两个ajax调用来获取数据

在您的情况下,对changeSecond函数中的两个脚本进行两​​次ajax调用,并使用相应脚本的结果更新div

我建议使用像jquery这样的库,因为你可以用很少的编码轻松地进行ajax调用

关于javascript - 表单提交后保留数据库查询结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20310411/

相关文章:

javascript - 将 div 中的高度与 float 左右对齐

javascript - JPA ng-repeat 过滤器 - 多个 id 作为一个

php - mysql 上一个/下一个 id 和循环

php - 如何检查 session 是否开启

javascript - 如何用javascript显示和更新总价?

javascript - 为什么 Android 上背景图像(动画)的快速更改如此缓慢

javascript - 从字符串的开头删除特定字符串?

javascript - 使用 HTML 和 JavaScript 确认方法

php - 使用php访问多个网页的代码

javascript - 当代码等于给定文本时显示 div