Ajax调用使用Button单击里面的表单不起作用

时间:2013-03-18 11:38:47

标签: javascript jquery html ajax

当我单击Form中的按钮时,我尝试使用Ajax调用服务器。但即使我使用event.PreventDefault或返回false,它也不会使用Ajax。

可能是什么问题。这是我的HTML和jQuery代码

<form action="/Patient/Search" id="patient-search-form" method="post">   
<input type="text" id="PatientName" />
<button class="btn blue-button" id="search-patients" type="submit">
 <i class="icon-save icon-white"></i><span>Search</span>
</button>
</form>


<script type="text/javascript">
    $(document).ready(function () {
        $('#search-patients').submit(function (event) {
            event.preventDefault();             
            SearchPatients();
            return false;
        });
    });
</script>

2 个答案:

答案 0 :(得分:5)

您的提交事件处理程序正在分配给按钮,其中应该是以下形式:

<script type="text/javascript">
        $(document).ready(function () {
            $('#search-patients-form').submit(function (event) {
                event.preventDefault();             
                SearchPatients();
                return false;
            });
        });
</script>

或者你可以绑定到按钮点击事件:

<script type="text/javascript">
        $(document).ready(function () {
            $('#search-patients').click(function (event) {
                event.preventDefault();             
                SearchPatients();
                return false;
            });
        });
</script>

答案 1 :(得分:1)

$(document).ready(function () {
        $('#search-patients').click(function (event) {
            event.preventDefault();             
            SearchPatients();
            return false;
        });
    });

你在那里给了按钮ID。我们需要给表单ID。