Javascript onClickは発生しませんgetJSON

Question

私のJavascript関数が囲まれたjQuery関数$ .getJSON（）を実行しないのはなぜですか？

HTML

<form action="" method="get"> 
    <input id="search" name="search" type="text" class="map-search form-control input-sm"/> 
    <span class="input-group-btn"> 
     <input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" /> 
     <span class="glyphicon glyphicon-search"></span> 
    </span> 
</form> 

Javacript

function nominatim_search() { 
    var query = document.getElementById("search").value; 
    $.getJSON('http://nominatim.openstreetmap.org/search/ph/'+query+'?format=json&limit=1&polygon_geojson=1&bounded=1&addressdetails=1', function (boundary) { 
     var json = boundary[0].geojson; 
     L.geoJSON(json).addTo(map); 
    }); 
} 

しかしそれは関数を入力し、クエリを警告、しかし、JSONはロードされませんでしょう。私はその機能の外にいるだろう。

Answer 1

入力はテンプレートタグではありませんので、あなたが内側に入れ、他のタグなしでそれを閉じる必要があります。フォーム<input> ..... </input>

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" /> 

htmlには無効です

更新

この問題を解決するには、入力タイプ= "submit"を変更することが必須です。なぜなら、サブミットによってスクリプトの関数が終了する前にページがリロードされるからです。この回答のコメントセクションでは、入力タイプ= "ボタン"を使用することを提案し、それはそのトリックを行いました。入力を<button type="button">タグで置き換えるなどの他の解決策はこの質問に対して有効であると考えていいでしょう。<button type="button">タグはテンプレート化されたタグであるため質問のニーズに忠実である可能性があります。

Answer 2

あなただけ>を追加し、近い入力タグをdidntの：

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()"> 

Answer 3

ここでマークアップをこれらと置き換えてみてください。スパンを使用してボタンのテキストを変更する場合は、<input>の代わりに<button>を使用してください。

HTML

<form action="" method="get"> 
    <input id="search" name="search" type="text" class="map-search form-control input-sm"> 
    <span class="input-group-btn"> 
    <button class="map-search btn btn-default btn-sm" type="button" onclick="nominatim_search()" /> 
     <span class="glyphicon glyphicon-search"></span> 
    </button> 
    </span> 
</form> 

それはあなたの問題を手伝ってくれましたなら、私に教えてください。