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

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

2 Answers 2

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.