HTML form - AJAX - checkbox array handling issue

[Steven_B]

Hello potential problem solvers! I want to apologize ahead of time if this is a repeat of a similar question that I did not find, but here's my issue.

I have a form I recently have been asked to try to make work seamlessly(no page refreshes), so of course I'm going to try to use AJAX! I got a drop down box form value to work properly, but not the date/time or checkbox. Here's parts of the code in question:

<script language="javascript" type="text/javascript">
function doWork2() {
    httpObject2 = getHTTPObject();
    params = "startdate=" + document.getElementById('startdate').value +
                 "&enddate=" + document.getElementById('enddate').value + 
                 "&agency[]=" + document.getElementById('agency[]').value +
                 "&sortType=" + document.getElementById('sortType').value +
                 "&search=" + document.getElementById('search').value; 
    if (httpObject2 != null) {
        httpObject2.open("POST", "administration_reports_Work.php", true);
        httpObject2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        httpObject2.setRequestHeader("Content-length", params.length);
        httpObject2.setRequestHeader("Connection", "close");
        httpObject2.onreadystatechange = setOutput2;
        httpObject2.send(params);
        
    }
}
</script>

.
.
.

<form id="form1" name="form1" method="post" action="administration_reports_work.php">
    <br />
    <label>
        <p align="left">Start Date
            <input type="Text" id="startdate" name="startdate" maxlength="25" size="25" onkeypress="return false;"/><a href="javascript:NewCal('startdate','DDMMYYYY',true,24)"><img src="<?=_WWWROOT?>/images/cal.gif" width="16" height="16" border="0" alt="Pick a date" /></a>
            <span class="descriptions">Select Date and Time..</span>
        </p>
    </label>

    <label>
        <p align="left">End Date
            <input type="Text" id="enddate" name="enddate" maxlength="25" size="25" onkeypress="return false;"/><a href="javascript:NewCal('enddate','DDMMYYYY',true,24)"><img src="<?=_WWWROOT?>/images/cal.gif" width="16" height="16" border="0" alt="Pick a date" /></a>
            <span class="descriptions">Select Date and Time..</span>
        </p>
    </label>

    <p align="left">Agency:<br />                    
        <?php
            $options = '';
            foreach($resagency as $k) {
                $options .= '<label><input type="checkbox" id=agency[] name=agency[] value="'.$k['Name'].'"';
                $options .=' />'.$k['Name'].'</label><br />';
            }                                    
            echo $options;
        ?>
    </p>

    <p align="left">Sort By:
        <select name="sortType" id="sortType">
            <option value="date">Date</option>
            <option value="agency" <?if($_REQUEST['sortType']==agency) echo "selected"?>>Agency</option>
        </select>
    </p>
    
    <p>
        <input type="button" onclick="doWork2();" id="search" name="search" value="Search" />
    </p>
</form>

So the javascript function is getting called once the search button is clicked. AJAX will send the form to that _work.php page to.. well do the work haha. Since the form originally sent it via POST, I figured I'd do the same with this.
One thing to mention is I sent the form directly to the _work.php page and it worked.

This is my first actual implementation of ajax I've ever done, so if something is wrong or can be improved, I wouldn't mind hearing it!