Populate a form with data from an associative array with jQuery

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.

From stackoverflow Vasil

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

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

  From Adam Bellaire

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

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

  nickf : Good answer, but that won't pick up select boxes or textareas. Perhaps change "input[name=...]" to "*[name=...]" ? Also, I've just fixed up a syntax error in your code.

  Eran Galperin : I'm not sure if '*' would work, and it might somewhat intensive if it does. You could add the other options separated by commas - $("input[name...],select[name...],textarea[name...]).val...

  JacobM : You can do $(":input[name=...") and it should pick up selects and text areas (note the colon).
  From Eran Galperin

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

  nickf : take a look at the val() function. it handles all those cases for you, i believe.
  From J5

• 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 );
      } );
  };
  

  From Brian Franklin