title: jquery dialogs and filling in edit forms
body: <p>This is the first week I've been playing with jQuery so I have a lot of questions regarding it.</p>
  
  <p>I'm using one dialog for both the creation and editing of items.</p>
  
  <p>My function editCustomField() doesn't populate my field names like I thought it should, but it does open the dialog.  </p>
  
  <p>Should I be using javascript getElementById("empId"), etc. instead of jQuery?  Can I wrap my function in some form of jQuery tags to make it work?  The link is built using jstl and el. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function editCustomField(empId, fieldId, name, value){
      $("empId").val(empId);
      $("fieldId").val(fieldId);
      $("fieldName").val(name);
      $("fieldValue").val(value);
      $("#customFieldDialog").dialog("open");
      return false;
    };
  
    $(document).ready(function(){
      $("#customFieldDialog").dialog({
        resizable: false,
        modal: true,
        autoOpen: false,
        width:315,
        buttons: {
          "Save" : function() {
            $("#customFieldForm").submit();
          },
          "Cancel" : function() {
            $(this).dialog("close");
            return false;
          }
        }
      });
  
  $(".customfield").click(function(e) {
        $("#customFieldDialog").dialog("open");
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" onclick="editCustomField('${employee.id}','${viewCustomField.id}','${viewCustomField.name}','${viewCustomField.value}');"&gt;&lt;img src="&lt;c:url value="/images/pencil.png"/&gt;" alt="edit" title="edit" /&gt;&lt;/a&gt;
  
  &lt;div id="customFieldDialog" title="Custom Field"&gt;
    &lt;form id="customFieldForm" action="saveCustomField.action" method="POST"&gt;
      &lt;input type="hidden" id="empId" name="employeeId" /&gt;
      &lt;input type="hidden" id="fieldId" name="customFieldId" /&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;Field name:&lt;/td&gt;&lt;td&gt;&lt;input id="fieldName" type="text" name="customField.name" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Value:&lt;/td&gt;&lt;td&gt;&lt;input id="fieldValue" type="text" name="customField.value" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>