Ajax call using Button click inside form not working

Question

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>

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

Oliver · Accepted Answer · 2013-03-18 11:41:42Z

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>

answered Mar 18, 2013 at 11:41

Oliver

9,0322 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Madura Harshana Over a year ago

That is a good solution. if you use a form submit, you have to use form id patient-search-form like this solution

PSR · Accepted Answer · 2013-03-18 11:46:14Z

1

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

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

edited Mar 18, 2013 at 11:46

answered Mar 18, 2013 at 11:39

PSR

40.4k43 gold badges115 silver badges154 bronze badges

2 Comments

Billa Over a year ago

I cant click my form. only i can submit

Billa Over a year ago

## is not id selector only single # :)

Collectives™ on Stack Overflow

Ajax call using Button click inside form not working

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related