特定の.jsonファイルにHTMLフォームを使用して.jsonファイルをHTMLテンプレートにロードする

Question

ロードするために、HTMLページ（ローカル）フォームの名前を入力する異なる.jsonファイルのロードがありますこの情報をテーブルに追加する。

は私のHTMLフォームは次のようになります。私も埋め込むしようとした

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script> 

    function filltable() { 
    var name = document.getElementById("file_name").value +".json"; 
    }; 

    $.getJSON(name,function(stuff){ 
    var items = []; 
    $.each(stuff, function(key, val){ 
     items.push("<tr>"); 
     items.push("<td id=''"+key+"''>"+val.sample+"</td>"); 
     items.push("<td id=''"+key+"''>"+val.variant+"</td>"); 
     items.push("<td id=''"+key+"''>"+val.depth+"</td>"); 
    }); 
    $("<tbody/>", {html: items.join("")}).appendTo("table"); 
    }); 


</script> 

：

<div class="container"> 
    <table class="table table-bordered table-striped table-hover"> 
    <thead> 
    <tr> 
     <th>Sample</th> 
     <th>Variant</th> 
     <th>Depth</th> 
    </tr> 
    </thead> 
    </table> 
</div> 

私のjavascriptのスクリプトはこれです：

<form> 
    File: <input type="text" Id="file_name"> 
    <input type="submit" value="Load file" onclick="filltable()"> 
    </form> 

私のテーブルヘッダーはこれです.getJSONコードを私のfilltable（）関数に入れて、送信ボタンがクリックされたときに呼び出されるようにします。作業。私は交換する場合：

"$ .getJSON（名称、機能（もの）{"

と：

".getJSON（ "file1.json"、機能（もの{"

それは細かいロード - 私はちょうど入力を使用して別のファイルを読み込むことができるようにしたい

Answer 1

このお試しください：

$('form').on('submit', function(){ 
    var name = document.getElementById("file_name").value +".json"; 
    $.getJSON(name,function(stuff){ 
    var items = []; 
    $.each(stuff, function(key, val){ 
     items.push("<tr>"); 
     items.push("<td id=''"+key+"''>"+val.sample+"</td>"); 
     items.push("<td id=''"+key+"''>"+val.variant+"</td>"); 
     items.push("<td id=''"+key+"''>"+val.depth+"</td>"); 
    }); 
    $("<tbody/>", {html: items.join("")}).appendTo("table"); 
    }); 
    return false; 

});