Ajax call using Button click внутри формы не работает

Question

Я пытаюсь вызвать сервер, используя Ajax, когда я нажимаю кнопку внутри формы. Но он не использует Ajax, даже если я использую event.PreventDefault или возвращаю false.

В чем может быть проблема. Вот мой 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> 

Answer 1

Ваш представить обработчик события назначаются на кнопку, где она должна быть форма:

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

Answer 2

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

вы дали кнопку Id there.We необходимо предоставить идентификатор формы.