title: jQuery populate form from json
body: <p>I'm clearly missing something about jquery... I'm trying to populate a form that is inside a jQueryUI dialog box.
  I'm getting the JSON data just fine, but it escapes me how I reference the data and set the value of the form fields...</p>
  
  <p>You will see THREE attempts below - the last one is the one almost everyone says to use - but the form remains BLANK...
  What am I missing?????</p>
  
  <pre><code>$( '#companies' ).on( 'click', '.uLink' , function( event ) {
      // set ID
      var xid = $( this ).data( 'identity' );
      // get record
      $.ajax({
          type: 'POST',
          url: 'm/company_edit.php',
          dataType: 'json',
          data: { id: xid },
          success: function ( data ) {
              // display dialog
              $( '#company-form-container' ).dialog( 'open' );
  
              /* ATTEMPT #1 - with a variant on 'name' - form remains blank
              // populate form
              $( '#companyid' ).val( value.id );
              $( '#name' ).val( 'test' + value.name );
              $( '#address1' ).val( value.address1 );
              $( '#address2' ).val( value.address2 );
              $( '#city' ).val( value.city );
              $( '#state' ).val( value.state );
              $( '#postalcode' ).val( value.postalcode );
              $( '#phone' ).val( value.phone );
              $( '#contact' ).val( value.contat );
              $( '#email' ).val( value.email );
              */
  
              /* ATTEMPT #2 - supposed to make some accommodation for field type...
                              Make assumption that fields are named same as JSON fields, and the you only
                              want to use the data value in that one spot...*/
                             /*
              var frm = '#company-form';
              $.each(data, function( key, value ){
                  var $ctrl = $( '[name='+key+']', frm );
                  switch( $ctrl.attr( "type" ) )  {  
                      case "text" :   
                      case "hidden":  
                      case "textarea":  
                      $ctrl.val(value);   
                      break;   
                      case "radio" : case "checkbox":   
                      $ctrl.each(function(){ if($(this).attr('value') == value) {  $(this).attr("checked",value); } });
                      break;  
                  }  
              });  
              */
  
              // attempt 3 - still no go
              $.each( data, function( key, value ) {
                  $( '#' + key ).val( value ); 
                 });
  </code></pre>
  
  <p>/*
                                 // attempt suggested below - no changes...
                                  var c =  jQuery.parseJSON( data );</p>
  
  <pre><code>            // populate form
              $( '#companyid' ).val( c.id );
              $( '#name' ).val( c.name );
  </code></pre>
  
  <p>*/</p>
  
  <pre><code>        },
  
          error: function () {    
              // there's an error
              $( '#message' ).html( '&lt;p&gt;There was a problem on the server... &lt;/p&gt;' );
              $( '#message' ).removeClass( 'hidden' ).addClass( 'message' );
          }
      });
  
      return false;
  });
  </code></pre>
  
  <p>Sample of JSON data</p>
  
  <pre><code>[{"id":"3", "name":"Sub Customer B", "address1":"232 road", "address2":"", "city":"Galatan ", "state":"TN", "phone":"", "email":""}]
  </code></pre>
  
  <p>and this is the HTML Form</p>
  
  <pre><code>&lt;!-- the form --&gt;
  &lt;div id="company-form-container" title="Create New Company"&gt;
  &lt;p class="validateTips"&gt;* fields are required.&lt;/p&gt; 
  &lt;form id="company-form" &gt;
  &lt;fieldset&gt;
  
      &lt;input type="hidden" name="customer_id" id="customer_id" value="" /&gt;
  
      &lt;label for="name"&gt;name&lt;sup&gt;*&lt;/sup&gt; &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="name" id="name" 
             size="50" maxlength="100" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="address1"&gt;address1 &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="address1" id="address1" 
             size="20" maxlength="100" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="address2"&gt;address2 &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="address2" id="address2" 
             size="10" maxlength="50" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="city"&gt;city &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="city" id="city" 
             size="20" maxlength="50" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="state"&gt;state &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="state" id="state" 
             size="5" maxlength="3" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="postalcode"&gt;postal code &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="postalcode" id="postalcode" 
             size="20" maxlength="15" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="phone"&gt;phone &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="phone" id="phone" 
             size="20" maxlength="20" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="contact"&gt;contact &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="contact" id="contact" 
             size="20" maxlength="50" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
      &lt;label for="email"&gt;email &lt;span class="fieldhint"&gt;&lt;/span&gt;&lt;/label&gt; &lt;br/&gt;
      &lt;input type="text" name="email" id="email" 
             size="20" maxlength="100" class="text ui-widget-content ui-corner-all" /&gt;&lt;br/&gt;
  
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>