jquery dialogs and filling in edit forms

This is the first week I've been playing with jQuery so I have a lot of questions regarding it.

I'm using one dialog for both the creation and editing of items.

My function editCustomField() doesn't populate my field names like I thought it should, but it does open the dialog.

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.

<script type="text/javascript">
  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");
          ret开发者_StackOverflow社区urn false;
        }
      }
    });

$(".customfield").click(function(e) {
      $("#customFieldDialog").dialog("open");
    });
  });
</script>

HTML:

<a href="#" onclick="editCustomField('${employee.id}','${viewCustomField.id}','${viewCustomField.name}','${viewCustomField.value}');"><img src="<c:url value="/images/pencil.png"/>" alt="edit" title="edit" /></a>

<div id="customFieldDialog" title="Custom Field">
  <form id="customFieldForm" action="saveCustomField.action" method="POST">
    <input type="hidden" id="empId" name="employeeId" />
    <input type="hidden" id="fieldId" name="customFieldId" />
    <table>
      <tr>
        <td>Field name:</td><td><input id="fieldName" type="text" name="customField.name" /></td>
      </tr>
      <tr>
        <td>Value:</td><td><input id="fieldValue" type="text" name="customField.value" /></td>
      </tr>
    </table>
  </form>
</div>

With JQuery, when you are referring to an element by id, you have to prefix the attribute with a #

In your case, the correct code to populate your fields would be

  function editCustomField(empId, fieldId, name, value){
    $("#empId").val(empId);
    $("#fieldId").val(fieldId);
    $("#fieldName").val(name);
    $("#fieldValue").val(value);
    $("#customFieldDialog").dialog("open");
    return false;
  };

You need a # for ID selectors.

 function editCustomField(empId, fieldId, name, value){
    $("#empId").val(empId);
    $("#fieldId").val(fieldId);
    $("#fieldName").val(name);
    $("#fieldValue").val(value);
    $("#customFieldDialog").dialog("open");
    return false;
  };