Populate a form with data from an associative array with jQuery

Question

Last time I asked about the reverse process, and got some very efficient answers. I'm aiming for least lines of code here. I have a form of fields and an associative array in the {fieldname:data} format, I want to populate a corresponding form with it.

Answer 1

If your form elements have their ID set to the fieldname:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); });

Answer 2

Or similar to the previous suggestion using the field names instead of ids:

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

Answer 3

When I did this for a project, I found that setting the value of select fields, radio buttons and checkboxes necessitated more complex code, something along the lines of:

jQuery.each(data, function (name,value) {
  jQuery("input[name='"+name+"'],select[name='"+name+"']").each(function() {
    switch (this.nodeName.toLowerCase()) {
        case "input":
            switch (this.type) {
                case "radio":
                case "checkbox":
                    if (this.value==value) { jQuery(this).click(); }
                    break;
                default:
                    jQuery(this).val(value);
                    break;
            }
            break;
        case "select":
            jQuery("option",this).each(function(){
                if (this.value==value) { this.selected=true; }
            });
            break;
    }
  });
});

I haven't tested this code so I hope there are no silly syntax errors that I should have caught. Hope this helps.

I am not allowed to comment on the comments here (yet), so .... As noted in the comment, the jQuery .val(val) method handles setting radio buttons,checkboxes and selects.

You will still need to put select[name=...] into your jQuery selector pattern or the select elements won't be updated.

Answer 4

I have not seen jQuery handle passing a single (non-array) value into val() for a radio or checkbox input. You have to be sure to wrap the single value into an array.

I have also typically not wanted to alter the values of button-ish inputs, so I filter those out.

Here's a function that handles the array wrapping, button filtering, and also restricts the input selection to a given form element. The form parameter is optional. If left off/null/undefined, then all inputs on the page will be selected.

function populateForm(data, form) {
    $.each( data, function(name, value) {
        var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form );
        input.val( ( !$.isArray( value ) && ( input.is(':checkbox') || input.is(':radio') ) ) ? [ value ] : value );
    } );
};