MYSQL / Ajax / PHP生成的下拉列表未通过'GET'传递值

时间:2012-08-07 14:06:22

标签: php mysql ajax drop-down-menu get

在这方面看到很多线索,但不确定是否与我所发生的事情有关。我尝试了一些“解决方案”,但都无济于事。这是我的代码的一部分:

<td><select name="County" onChange="getCity('findcity.php?county='+this.value)">

...

   <td><fieldset id="f2">
     <select name="Town">
     <option value="Any">Any Town</option>
     </select>
     </fieldset>
       </td></tr>

...

</td></tr>
           <tr>
           <td><fieldset id="f4">
           <input type="submit" name="Search!">
           </fieldset>
           </form>
           </td>
           </tr>

Town Select一开始只作为占位符。在第一个下拉列表被更改后,第二个下拉列表将通过getCity()函数填充。它将选定的值传递给findcity.php,然后使用mysql通过findcity.php填充它,然后使用副本替换TOWN选择:

MySQL生成一个:(它有效)

<select name="Town">
<option value="Any">Any Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
   <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
<? } ?>
</select>

这是完成所有工作的功能:

<script>
function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }



    function getCity(strURL) {      

        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('f2').innerHTML=req.responseText;   

                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }


</script>

最终结果是GET:

results.php?County=Kent&Sector=Any&Search%21=Submit 

如果我在没有做任何事情的情况下提交,那就有效:

results.php?County=Bedfordshire&Town=Any&Sector=Any&Search%21=Submit

我想是因为它没有替换输入框。我使用了希望消除我认为是因为它在DIV内部而引起的问题的字段集。

叹息,我知道有一个简单的解决方案,我只是不记得是什么。

此外,如果你告诉我如何从请求中删除'&amp; Search ..'部分,奖励积分:S不知道为什么搜索按钮将自己放在那里,它在任何其他作品中都没有完成了,是因为场集吗? 我期待着任何答案,谢谢你们。

编辑:如果有人甚至可以提供替代方法来填充第二个下拉并修复此问题,我会非常满意。

$county=$_GET['county'];
//$county =mysql_real_escape_string($county);
include('includes/dbc.php');

$query="SELECT DISTINCT `dir_town` FROM `directories` WHERE `dir_county` = '$county' ORDER BY `dir_town` ASC";
$result=mysql_query($query);?>
<select name="Town">
<option value="Any">Any</option>
<? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
    </select>

我的dbc.php完成所有连接。

1 个答案:

答案 0 :(得分:1)

首先,删除“搜索!”从您的查询字符串中,替换

<input type="submit" name="Search!">

<input type="submit" value="Search!" />

“搜索”正在添加到查询字符串中,因为它具有name属性。删除name,然后从查询字符串中删除输入。

<强>更新

您可能需要考虑使用jQuery进行AJAX调用。它更清洁(你可以删除那个丑陋的getHMLHTTP()函数)。只需包含jQuery源代码

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

现在您可以开始使用jQuery调用并删除内联onchange属性:

<script language="javascript" type="text/javascript">
    $("select[name=County]").on('change', function() {
        $.get('findcity.php', 
            {
                county: $("this").val()
            }, function (data) {
                $("#city").replace(data);
            }
        );
    });

}
</script>

来自$.get()$("#city").replace(data);)的回调函数将使用 findcity.php 的任何返回值替换id为“city”的元素。由于这应该是另一个下拉列表,我们将以原始形式执行此操作:

<select name="Town" id="city"></select>

然后当您的输出来自 findcity.php 时,它将用填充的下拉列表替换它:

<select name="Town" id="city">
    <option value="Any">Any Town</option>
    <? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
</select>

现在,如果您需要使用“Town”下拉列表执行类似操作,请重复“Town”的jQuery .on()代码(因为我们为其提供了ID,我们可以通过名称或ID来引用它)。

//$("#city") can be used instead of $("select[name=Town]") - both return the same element
$("select[name=Town]").on('change', function() { 
    // do something here
});