Question

我有一个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>

Answer 1

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

      $.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并选择

Answer 2

你的意思是：

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

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

Answer 3

试试这个：

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/

Answer 4

要么找到所有输入并获取输入名称并检查它们是否在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对象中有属性然后它将使用该属性值作为输入值。

Answer 5

您可以使用我的插件，它非常简单：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);
        }
    }

});

将JSON属性绑定到表单

5 个答案: