onchange ajax get not work on form method post

Question

Я пытаюсь сделать onchange событие в моей форме. onchange event использовать ajax get. но он не вернет значение.

вот мой заголовок актив

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

вот моя форма

<form action="/" method="post" > 
    <select name="juz" onchange="juz(this.value)"> 
     <option value="">-- Pilih --</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <div id="keluar"></div> 
</form> 

и вот сценарий

<script type="text/javascript"> 
     function juz(val) { 
     var hasilSurat = $("#keluar"); 
     $.ajax({ 
      url: "{{URL::asset('v1/juz')}}" + '/' + val, 
      method: 'GET', 
      dataType: 'json', 
     }).done(function(data) { 
      if (data.response == 1) { 
       hasilSurat.val(data.result); 
      } else { 
       hasilSurat.val(data.result); 
      } 
     }); 
    } 
</script> 

и из лога консоли

test:11 Uncaught TypeError: juz is not a function 
at HTMLSelectElement.onchange 

Answer 1

изменения выберите name в любое другое значение, кроме juz

<select name="juza" onchange="juz(this.value)"> 

Внутри form тега мы не в состоянии установить name значение свойства для onchange событий имени функции обработчика.

этот код будет работать, так как это не в form

<select name="juz" onchange="juz(this.value)"> 
     <option value="">-- Pilih --</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 

этот код не будет работать, так как select находится внутри формы,

<form action="/" method="post" > 
    <select name="juz" onchange="juz(this.value)"> 
     <option value="">-- Pilih --</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <div id="keluar"></div> 
</form> 

Не уверен, что причина, я буду стараться обновлять его ,