表單提交onChange事件不能與JQuery函數一起使用

Question

我想在選擇框的onChange事件上進行表單提交。提交操作應該觸發一個JQuery函數。當我使用提交按鈕而不是onChange事件函數時，它工作正常。但是，當我使用onChange事件時，我無法觸發該函數。

MY形式：

<form id="zoekSchool" method="get"> 
    <div class="form-group"> 
     <label for="thema" class="desktop small">School</label> 
     <select class="form-control" name="school" id="school" onchange="this.form.submit()"> 
      <option value="" disabled selected>Search</option> 
      <option value="1">item 1</option> 
      <option value="2">item 2</option> 
      ... 
     </select> 
    </div> 
</form> 

我的JavaScript/jQuery的：

function initMap(x) { 
    $('#zoekSchool').submit(function() { // bind function to submit event of form 
     var schoolID = $('#school').val(); 
     ... 
     return false; //prevent default action 
    }); 
} 

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" 
    async defer></script> 

其中...表示 '一些代碼'。

也許重要：我正在使用googleMaps Api。 這裏有什麼問題？

Answer 1

你可以嘗試這樣的..

onchange="$(this).parents('form').submit()" 

或

onchange="$('#zoekSchool').submit()" 

，而不是onchange="this.form.submit()"

<form id="zoekSchool" method="get"> 
<div class="form-group"> 
    <label for="thema" class="desktop small">School</label> 
    <select class="form-control" name="school" id="school" onchange="$('#zoekSchool').submit()"> 
     <option value="" disabled selected>Search</option> 
     <option value="1">item 1</option> 
     <option value="2">item 2</option> 
     ... 
    </select> 
</div> 
</form> 

Answer 2

創建文檔準備事件處理程序，使用下面的代碼

$(document).ready(function() { 

    $('#school').change(function() { //Event handler for drop down 
     var form = $(this).closest('form'); 
     $(form).submit();// this fires submit event of form 
    }); 

});