onchange ajaxがフォームメソッドポストで動作しない

Question

私のフォームでonchangeイベントを実行しようとしています。 onchangeイベントはajax getを使用します。値を返しません。

はここにここに私のフォーム

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

だとコンソールログから私のヘッダー資産

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

だ

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

Answer 1

変更我々はonchangeイベントハンドラ関数名にnameプロパティの値を設定することができませんformタグの中にjuz

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

以外の他のいくつかの値にnameを選択します。それはselectがフォーム内にあるため、このコードは動作しません内部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> 

ではありませんので、

このコードは

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

理由わからない、私はそれを更新しようと、動作します。