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

Question

Well hi everybody,

I have the following form:

<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>

I call data via 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

I know the code above can be much better, but that's not the point at this moment.

I want to populate the dynamic fields.

My response from the ajax call:

{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"}

How do i get the fields populated in the right order??

(id is not always 1, 2, 3, It can also be 16, 19, 450)

Can't get my head arround this...

Thank you in advance!!

I know the code above can be much better, but that's not the point at this moment.

Answer 1

You can use the key of the array to populate the forms.

 $(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> 

---

Note:

$("input[name='meta_key[]']")[0] <- This will select the first input with name meta_key[]

Answer 2

Yeah it worked!!!

$.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();
                }
            });

Thank you so much!!