Question

我正在编写一个非常简单的搜索函数，它将根据用户选择的内容从数据库返回类似的结果，但是在测试onClick函数时它不起作用我已经检查了我的代码与那些类似的它应该工作，我在询问这个问题之前搜索过虽然没有解决方案，但这是代码的一个例子。

<form>
<fieldset>
    <legend>Search Form..</legend>
    <input type="text" id="itemID" name="itemName" placeholder="Enter item name.." />
    <select id="locSelect">
    <option id="loc1" value="mountain"> mountain </option>
    </select>
    </br>
    <input type="button" id="searchID" name="searchName" value="Search" onClick="runsearch();" />


</fieldset>
</form>

<div id="searchResult"></div>

<script type="text/javascript">

function runsearch()
{
    var item = $("#itemID").val();

    var location = document.getElementById("#locSelect");
    var selectedLoc = location.options[location.selectedIndex].text;

    if(item == '') 
    {
       alert("Item field is blank please specify an item");
    }

    else { $.post("LSR.php", {
        postitem = item,
        postlocation = selectedLoc },

        function(data)
        {
            $("#searchResult").html(data);
        });
    }
}
</script>

它应该采取用户选择的内容并将其发送到php页面，它将与数据库进行比较，我为登录/注册页面编写了类似的代码并且它有效，我不知道为什么这个没有，唯一不同的是选择，选项..我想了解我做错了什么。感谢您提前提供任何帮助。

Answer 1

您的函数中存在语法错误。使用此：

else { $.post("LSR.php", {
    postitem: item,
    postlocation: selectedLoc },

而不是：

else { $.post("LSR.php", {
    postitem = item,
    postlocation = selectedLoc },

您还有其他错误：

var location = document.getElementById("#locSelect");

应该是：

var location = document.getElementById("locSelect");

使用onClick将该功能放在按钮之前。

Answer 2

你在这里得到了一个问题22，如果你把这个函数放在表单上面，#itemID还没有存在于DOM中。如果将函数放在表单下面，函数runsearch还不存在。

为什么不使用：

$(document).ready(function(){
    $(document).on("click", "#searchID", function(e){
        console.log("clicked!"); //watch console for this, delete this line once you know it works.
        runsearch();
    });
});

此外，您的代码有一些问题（包括另一个答案中提到的冒号/等号）。我已经清理了一下。

这是错的： document.getElementById("#locSelect");

如果您正在使用document.getElementById，则不需要＃。这是一个jQuery id选择器。但是，你正在使用jQuery，所以拥抱它！ jQuery中document.getElementById的等价物只是$("#IDOFELEMENT")。

所有这些location.options[location.selectedIndex].text都可以简化为：location.val()，但我总是使用$来为jQuery对象添加前缀，这样他们就可以明显看出它们是jQuery对象，所以我将你的变量重命名为$ location。

这是一个工作小提琴：

http://jsfiddle.net/SeanKendle/b9udzjLp/

Answer 3

在关闭<fieldset>代码之前，您需要关闭<form>代码，这些代码无序。

onClick事件无法正常工作 - JS

3 个答案: