jQuery フォームに非同期で値をセット

フォームにajaxで取得したJSONの値をセットするサンプルです。

フォームに予めデータを埋め込む時は「value=""」でセットしますが、書きのフォームのHTMLは空です。

そこに対してJSで値を埋めています。


<form id="demo_form">
    <div>
        data1
        <input type="text" name="data1" size="40" value="" >
    </div>
    <div>
        data2
        <input type="text" name="data2" size="40" value="" >
    </div>
    <div>
        data3
        <input type="text" name="data3" size="40" value="" >
    </div>
</form>

このHTMLに


[{"data1":"abc","data2":123,"data3":"\u3042"}]

というJSONの値をセットしています。

フォームに値をセットしているJSはこちら


$(document).ready(function(){

    //JSONファイル、またはJSONを返すAPIのパス
    jsonPath = '/trial/php/293/api/';

    $.ajax({
        url: jsonPath,
        cache: false,
        success: function(json){

            for (var i = 0;i < json.length;i++){
                for (var key in json[i]) {
                    $('#demo_form input[name='+key+']').val(json[0][key]);
                }
            }

        }
    });

});

過去の記事が空欄のフォームに入力するので言わば「新規登録」のフォーム。

今回のサンプルは、「更新」のときのフォームに非同期でデータを反映する事例になります。