Question

嗨大家好，

我有以下表格：

<form method="post">
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
</form>

我通过AJAX调用数据：

    // Call Dynamic Data
    get_dynamic_data = function (checklist_id)
    {
        $.getJSON(MAP_URL+'onderhoud/handle/fetch_data.php?cat=get_dynamic&checklist_id='+ checklist_id, function(data) 
        {
            var section = "";
            $('#collapseDynamic').collapse({show: true});
            $('.togglerDynamic span:first').removeClass("badge-success").addClass("badge-danger");
            $('.togglerDynamic span').eq(1).removeClass("oi-plus").addClass("oi-minus");
            $('#dynamic').val("1");

            $.each(data, function(key, value)
            {
                $.each(value, function(vars, values)
                {
                    $('#edit_checklist').find('input[type="text"][name="' + section + vars + '"]').val(values);
                    $('#edit_checklist').find('input[type="text"][name="' + section + vars + '[' + key + ']"]').val(values);
                    $('#edit_checklist').find('input[type="checkbox"][name="' + section + vars + '"]:checked').removeAttr('checked');
                    $('#edit_checklist').find('input[type="checkbox"][name="' + section + vars + '[' + key + ']"]:checked').removeAttr('checked');
                    $('#edit_checklist').find('input[type="checkbox"][name="' + section + vars + '"][value="' + values + '"]').attr('checked', 'checked');
                    $('#edit_checklist').find('input[type="checkbox"][name="' + section + vars + '[' + key + ']"][value="' + values + '"]').attr('checked', 'checked');
                })
            });
        })
        // using the fail promise callback
        .fail(function( jqxhr, textStatus, error ) {
            var err = textStatus + ", " + error;
            console.log( "Request Failed: " + err );
        });
    }
    get_dynamic_data(checklist_id);
    // End Call Dynamic Data

我知道上面的代码可以更好，但目前不是重点。

我想填充动态字段。

我对ajax电话的回应：

{id: "1", checklist_id: "20170001", meta_key: "dfghdfgh", meta_value: "niet-goed", meta_desc: "asdfasdf"}
{id: "2", checklist_id: "20170001", meta_key: "ghjhgjghfj", meta_value: "nvt", meta_desc: "ghjfghjgj"}
{id: "3", checklist_id: "20170001", meta_key: "werqwerwe", meta_value: "goed", meta_desc: "werqwerwer"}

如何以正确的顺序填充字段？

（id不总是1,2,3，也可以是16,19,450）

无法解决这个问题...

提前谢谢!!

我知道上面的代码可以更好，但目前不是重点。

Answer 1

您可以使用数组的key填充表单。

$(document).ready(function() {

  var data = [{
    id: "1",
    checklist_id: "20170001",
    meta_key: "dfghdfgh",
    meta_value: "niet-goed",
    meta_desc: "11 asdfasdf"
  }, {
    id: "2",
    checklist_id: "20170001",
    meta_key: "ghjhgjghfj",
    meta_value: "nvt",
    meta_desc: "ghjfghjgj"
  }, {
    id: "3",
    checklist_id: "20170001",
    meta_key: "werqwerwe",
    meta_value: "goed",
    meta_desc: "werqwerwer"
  }]

  //Loop each result
  for (var key in data) {
    $($("input[name='meta_key[]']")[key]).val(data[key]["meta_key"]);
    $($("input[name='meta_value[]']")[key]).val(data[key]["meta_value"]);
    $($("input[name='meta_desc[]']")[key]).val(data[key]["meta_desc"]);
  }
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="post">
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
  <br />
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
  <br />
  <input type="text" name="meta_key[]"> - <input type="text" name="meta_value[]"> - <input type="text" name="meta_desc[]">
</form>

注意：

$("input[name='meta_key[]']")[0]＆lt; - 这将选择名为input的第一个meta_key[]

Answer 2

是的，它有效!!!

$.each(data, function(key, value)
            {
                $.each(value, function(vars, values)
                {
                    console.log(key + ' = ' + vars);
                    $($('input[type="text"][name="' + section + vars + '[]"]')[key]).val(values);
                    $($('input[type="checkbox"][name="' + section + vars + '[]"]:checked')[key]).removeAttr('checked');
                    $($('input[type="checkbox"][name="' + section + vars + '[]"][value="' + values + '"]')[key]).attr('checked', 'checked');
                });
                i++;
                if(i < data.length)
                {
                    add_dynamic();
                }
            });

非常感谢!!

通过AJAX调用填写具有相同名称的动态表单字段

2 个答案: