Dynamic Editing Forms

I want to be able to construct an edit form that contains some fields that show only conditionally, that is, only when the operator enters (or does not enter) data into some visible field. For example, when posting a bank deposit, if the operator enters the number of the invoice the deposit is paying, I can populate a lot of fields automatically, and do not need to capture some data; but if the payment is not against an invoice I have to ask for more details.

The important points to consider here are that

all columns in the grid are included as fields on the form when the form is created; those that are not editable or are hidden just do not show (display:none).
all rows on the form (that is, the table row containing the label and the field) are identified with a unique name tr_fieldname where fieldname is the name of the field in the grid.
jqGrid supports hiding and showing rows on the form with hide() and show()

In general then, we can use

$("#tr_fieldname",formid).hide()

and

$("#tr_fieldname",formid).show()

Example

In this snippet, when the operator leaves the Invoice field, we check to see if something has been entered. If we have an invoice number, then we try to retrieve the related data from the server. If the Invoice number is valid, we show the data returned and hide the fields we no longer need.

function CheckInvoice(formid) {
    var invno = 'invoice=' + $("#invoice",formid).val() ; 
    if (invno == 'invoice=') { 
        alert("invoice is blank; please enter account #")  
      } else { 
        $.getJSON(searchinvoice, invno, function(data) { 
            if (data.status == 'No match found; please try again') { 
                alert(data.status) 
              } else { 
                // Load the fields we know about
                $("#invoiced",formid).val(data.invoiced); 
                $("#outstanding",formid).val(data.os); 
                $("#acctname",formid).val(data.account); 
                $("#project",formid).val(data.project); 
                // Disabled loaded fields 
                $("#acctname",formid).attr('disabled',true); 
                $("#project",formid).attr('disabled',true); 
                // Hide unneeded fields 
                $("#tr_comment",formid).hide(); 
                $("#tr_projectnumber",formid).hide(); 
                $("#tr_shorttitle",formid).hide(); 
                $("#tr_client",formid).hide(); 
      ...

What it looks like is this, before anything has been entered:

and, after the operator has entered an Invoice number:

Now we can further enhance this by hiding some fields at the start, and showing them only when they are needed, thereby creating dynamic editing forms that respond to what the operator has done and still needs to do.