将JSON属性绑定到表单

时间:2011-09-08 11:50:24

标签: javascript jquery

我有一个JSON对象和一个<form>。如果JSON对象具有名称与表单<input>的名称匹配的属性,我希望输入显示此属性的值。使用JQuery有一种简单的方法吗?

var json = {foo: 'foo', bar: 'bar};
def form = $('#myform');

// something magical that assigns JSON property values to form inputs with matching names

有问题的表格类似于:

<form id = "#myform" action="/foo/bar/">
  <input name="foo"/>
  <input name="bar"/>
</form>

5 个答案:

答案 0 :(得分:11)

您可以运行一个循环来搜索元素并输入值:

      $.each(json,function(key,value) {
          form.find("input[name='"+key+"']").val(value);
      });

和表格:

<form id="myform">
    <input type="text" name="foo" />
    <input type="text" name="other" />
</form> 

使用.field而不是输入是使用textarea并选择

答案 1 :(得分:1)

你的意思是:

var json = {foo: 'foo', bar: 'bar}; 
def form = $('#myform');

for(var prop in json){
    $("#myform input[name="+prop+"]")[0].value = json[prop];
}

答案 2 :(得分:0)

试试这个:

var json = {foo: 'foo1', bar: 'bar1'};

for(var key in json) {
    if($('#myform input[name="'+key+'"]').length > 0){
        $('#myform input[name="'+key+'"]').attr('value',json[key]);
    }
}

我认为这就是你想要的;)

请参阅此处的示例:http://jsfiddle.net/expertCode/FgwHe/

答案 3 :(得分:0)

要么找到所有输入并获取输入名称并检查它们是否在json中,如:http://jsbin.com/ulelik/edit

var json = {foo: 'foo', bar: 'bar',  ContactEmail: "ContactEmail", fooo2 : "trigunatmak kulkarni"};
var inputs = $('input', '#myform').each(function() {
  if (json[this.name]) 
  {
    this.value = json[this.name];
  }

});

你挑选出所有输入并检查它们的名字是否在json对象中有属性然后它将使用该属性值作为输入值。

答案 4 :(得分:0)

您可以使用我的插件,它非常简单:https://github.com/devWaleed/JQuery-JSON-Form-Binding

如果要以自己的方式填充数据,则回调是可选的。

$("#myform").jsonToForm({ 
    data: {name: "Waleed", age: 23, gender: "Male"},
    callbacks: {
        age: function(value){
            $('[name="age"]').val(value+1);
        }
    }

});