javascript - Ajax call using Button click inside form not working - Stack Overflow

admin管理员组

文章数量:1328037

I try to call server using Ajax when i click a button inside a Form. But it does not use Ajax even if i use event.PreventDefault or return false.

What could be the problem. Here is my HTML and jQuery code

<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>

I try to call server using Ajax when i click a button inside a Form. But it does not use Ajax even if i use event.PreventDefault or return false.

What could be the problem. Here is my HTML and jQuery code

<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>

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked Mar 18, 2013 at 11:38 BillaBilla 5,2662323 gold badges6565 silver badges108108 bronze badges 1

• Are you sure there is no problem in SearchPatients() function? – KA. Commented Mar 18, 2013 at 11:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Your submit event handler is being assigned to the button, where it should be the form:

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

Or you could bind to the button click event instead:

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

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

you gave button Id there.We need to give form id.

本文标签： javascriptAjax call using Button click inside form not workingStack Overflow