Javascript for Report Forms

From PikaDocs

So you pull up your CSR report, and try to remember what goes in the status field. Is this for LSC field cases or for PAI cases? Am I supposed to put in just 5, or was it "1,2,3,4" or something else entirely?

Well, if you want to save yourself the trouble of remembering this, you can use a bit of Javascript to make some shortcuts.

All the modifications are made to 1 file only: the form.html file you find in the directory of the report.

Here's a screenshot this in action.

The links at the top of the screen modify the fields below. Clicking on one of the links at left disables or enables the correct date range boxes. If you're reporting only on closed cases then you don't want any value in the box for Cases Open As Of.

We use the links on the right to configure the right combination of Case Status and Funding to get what we need. For instance, LSC field cases are status "1,2,3,4" and funding code "LSC".

It's pretty simple, really. You just write some javascript to fill in the things you don't want to remember, and give the link a name that makes sense to you. Let's examine the code.

First, you add the links. Here is the code for the links shown on the left side of the example screenshot:

<p>Types of Cases:<br/>
<a href="#" onClick="run_CasesClosed();" title="Click to update # ">Only Closed Cases</a><br/>
<a href="#" onClick="run_CasesRemainingOpen();" title="Click to update # ">Only Cases Remaining Open as of Date</a><br/>
<a href="#" onClick="run_CasesAll();" title="Click to update # ">Both: Closed During Period & Open as of Date</a><br/>

Each link has an onClick event, which runs the javascript code. The href="#" just keeps the browser right where it is.

Now move down to the end of form.html, past the closing form tag </form>.

Here's the code we use. It begins and ends with a line distinguishing that this is javascript. Then there is one function for each of the types of cases...one for each link up above. I won't explain all the details of what this code does, but if you have some basic familiarity with javascript, or you read something about it on the Internet, I think you can follow along. Basically, the elements of the form have properties like backgroundColor and 'disabled' and 'value' which you can assign values too. That's what was done here.

<script type="text/javascript" language="JavaScript">
<!-- Andrew Cameron 2006/10/5
function run_CasesClosed(){
    // Andrew Cameron 2006/10/5 - important to set the backgroundColor before setting disabled to true
    // if set disabled first, IE won't set the backgroundColor although Firefox will
    document.form1.open_on_date.style.backgroundColor= 'gray';
    document.form1.open_on_date.value = '';
    document.form1.open_on_date.disabled = true;
    
    document.form1.close_date_begin.disabled = false;
    document.form1.close_date_begin.style.backgroundColor= 'white';
    
    document.form1.close_date_end.disabled = false;
    document.form1.close_date_end.style.backgroundColor= 'white';
}

function run_CasesRemainingOpen(){
    // Andrew Cameron 2006/10/5 - important to set the backgroundColor before setting disabled to true
    // if set disabled first, IE won't set the backgroundColor although Firefox will
    document.form1.open_on_date.disabled = false;
    document.form1.open_on_date.style.backgroundColor= 'white';
    
    document.form1.close_date_begin.style.backgroundColor= 'gray';
    document.form1.close_date_begin.value = '';
    document.form1.close_date_begin.disabled = true;
    
    document.form1.close_date_end.style.backgroundColor= 'gray';
    document.form1.close_date_end.value = '';
    document.form1.close_date_end.disabled = true;
}

function run_CasesAll(){
    // Andrew Cameron 2006/10/5 - important to set the backgroundColor before setting disabled to true
    // if set disabled first, IE won't set the backgroundColor although Firefox will
    document.form1.open_on_date.disabled = false;
    document.form1.open_on_date.style.backgroundColor= 'white';
    
    document.form1.close_date_begin.disabled = false;
    document.form1.close_date_begin.style.backgroundColor= 'white';
    
    document.form1.close_date_end.disabled = false;
    document.form1.close_date_end.style.backgroundColor= 'white';
}

// when the page loads, start with Closed cases as the default
run_CasesClosed();

//-->
</script>

Good luck! Hope you will post any of your improvements and innovations here!

---

Original entry by Andrew Cameron 2006/10/13
Legal Services Lawline of Vermont (http://www.lawlinevt.org/) and Vermont Legal Aid (http://www.vtlegalaid.org/)