未捕获的ReferenceError：函数未定义，它标记

I need to submit form through ajax but function not defined and i browser inspect element mark <DOCOTYPE HTML> please find code below

我需要通过ajax提交表单,但函数未定义,我浏览器检查元素标记请在下面找到代码

<form method="post" id="search_form" action="" name="search">
    <div>
        <select name="car_id" id="car_id" class="form-control">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
    <div>
        <select name="km_id" id="km_id" class="form-control">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
    <div class="col-sm-12" align="center" style="font-size: 20px;padding-top: 50px;padding-bottom: 150px;">
        <input class="btn-danger" id="search_button" name="search" onclick="search_function('locations.php')" type="button" value="search" />
    </div>
    </div>
</form>
<div class="col-sm-1"></div>
<div class="col-sm-12">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function search_function($responce) {
    $("#syana").innerHTML = '<img align="center" style="width:100px;height: 100px;margin-right: 300px;" src="loading.gif" />';
    $.ajax({
        type: "POST",
        url: $responce,
        data: $("form").serialize(),

        success: function(data) {
            $("#search").html(data);
        },
        error: function() {
            alert("fix the PHP!")
        }
    });

note that same function used in another page and run successsfully

请注意,在另一个页面中使用相同的功能并成功运行

2 个解决方案

#1

This is wrong

这是错的

<DOCTYPE HTML>

The corect one is

核心是

<!DOCTYPE html>

#2

The function should be initialized before the input button. So please use this code instead:

该功能应在输入按钮之前初始化。所以请使用此代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function search_function($responce) {
    $("#syana").innerHTML = '<img align="center" style="width:100px;height: 100px;margin-right: 300px;" src="loading.gif" />';
    $.ajax({
        type: "POST",
        url: $responce,
        data: $("form").serialize(),

        success: function(data) {
            $("#search").html(data);
        },
        error: function() {
            alert("fix the PHP!")
        }
    });
};
</script>
<form method="post" id="search_form" action="" name="search">
    <div>
        <select name="car_id" id="car_id" class="form-control">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
    <div>
        <select name="km_id" id="km_id" class="form-control">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
    <div class="col-sm-12" align="center" style="font-size: 20px;padding-top: 50px;padding-bottom: 150px;">
        <input class="btn-danger" id="search_button" name="search" onclick="search_function('locations.php')" type="button" value="search" />
    </div>
    </div>
</form>
<div class="col-sm-1"></div>
<div class="col-sm-12">

#1