CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Billa
Billa

Reputation: 5266

Ajax call using Button click inside form not working

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>

Upvotes: 1

Views: 8079

Answers (2)

PSR
PSR

Reputation: 40318

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

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

Upvotes: 1

Oliver
Oliver

Reputation: 9002

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>

Upvotes: 5

Related Questions