web-dev-qa-db-ja.com

jqueryを使用してJSONデータをフォームに再入力する

HTMLフォームがあり、ajaxを介してデータベースに保存します。キーと値のペアのクエリ文字列を取得するために、次のような非常に便利なserialize関数を使用しました。

var myData = $("form#form_id").serialize();
$.ajax({
    url: "my_save_script.php",
    type: "post",
    data: myData,
    success: function(msg){
        alert(msg);
    }
});

次に、空白のフォームをロードして、データベースからのデータを再入力します。これは、ajax呼び出しからJSON文字列として配信されます。次のような正しいキーと値のペアを持つJavaScriptオブジェクトを取得できました。

data = $.parseJSON(data);
data = data[0];

フォームを再入力する最も簡単でエレガントな方法は何ですか？

フォームの入力要素は、テキスト、選択、チェックボックス、ラジオです。入力要素の名前はデータベース列の名前と同じであり、上記のdataオブジェクトのキー/値ペアのキーです。これがserialize関数が私にとって非常にうまく機能する理由です

javascriptjqueryjsonformspopulate
22
jeffery_the_wind

私は最も簡単な方法はこれらの線に沿ったものになると思います：

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

基本的に、奇妙なのはチェックボックスとラジオだけです。なぜなら、それらはチェックされたプロパティcheckedを持つ必要があるからです。ラジオはチェックボックスよりも少し複雑です。ラジオをチェックする必要があるだけでなく、チェックする適切なONEを見つける必要があります（値を使用）。その他すべて（入力、テキストエリア、選択ボックスなど）の値は、JSONオブジェクトで返される値に設定するだけです。

jsfiddle： http://jsfiddle.net/2xdkt/

55
Bryan B.

Data [0]にフィールドの名前が含まれ、data [1]に値が含まれている場合は、次の操作を実行できます。

あなたはテキストボックスに対してこのようなことをすることができます：

$("[name="+data[0]+"]").val(data[1]);

次に、selectの場合は次のようになります。

$("[name="+data[0]+"]").val(data[1]);

チェックボックスとラジオボタンは、チェックされている場合のみシリアル化されることに注意してください。

したがって、チェックボックスの場合は次のようになります（jQuery 1.6以降）。

$("[name="+data[0]+"]").attr('checked','checked');

ラジオボタンを区別する方法によっては、ラジオボタンに追加の作業が必要になる場合があります。 （ID、値など）

0
evasilchenko