Problem with javascript onChange and servlet

[K DeLucia]

I have an application where I use jquery for the validation (I know almost nothing about jquery - just enough to get it into my web page and running, but little more). In this application I also had a need to have a drop down field whose options were dependant on the dropdown field above it. (So, when the department is chosen, the options for the request type change based on which department is selected.)

I added my own small javascript file/function to do the changing of the options in that second field (onchange) when the first field changes.

My problem is that when I attempt to submit the page, jquery complains that the field is required. So to test things, I made the field not required so jquery wouldn't complain, but my servlet also is not pulling the value from the field.

I'm assuming the problem is something to do with my javascript code that sets the field options, however, I don't know what is wrong. This is the only field where I'm having this problem and this is the only field where the options are set via javascript.

If I remove the onchange event and just set a single option for the field, everything works as expected, however, as soon as I add the onChange back into the picture, then jquery thinks the field is empty and my servlet does as well.

This is my javascript function:

function changeOptions(optionType) {
	//clear out current options
	//document.inquiryForm.requesttype.options.length = 0;
	if (optionType == "AP") {
		//document.inquiryForm.requesttype.options[0] = new Option("----- Please select a value -----", "", true);
		document.inquiryForm.requesttype.options[1] = new Option("Paybacks/deductions", "");
		document.inquiryForm.requesttype.options[2] = new Option("Invoice Copies/Support", "");
		document.inquiryForm.requesttype.options[3] = new Option("Other", "");
	} else {
		//document.inquiryForm.requesttype.options[0] = new Option("----- Please select a value -----", "", true);
		document.inquiryForm.requesttype.options[1] = new Option("Open Invoices less than 30 days old", "");
		document.inquiryForm.requesttype.options[2] = new Option("Payment History", "");
		document.inquiryForm.requesttype.options[3] = new Option("Credit History", "");	
	}	
}

And here's the relevant part of my servlet:

public final void service(final HttpServletRequest request, final HttpServletResponse response)
		throws ServletException, IOException {
		HttpSession session = request.getSession(true);
		try {
			List<FileItem> fileItems = parseRequest(request, response);			
			List<String> validationErrors = new ArrayList<String>();			
			String fieldLabel = "";
			Inquiry inquiry = new Inquiry();
			String validationMsg = "";
			
			Iterator<FileItem> iter = fileItems.iterator();
			while (iter.hasNext()) {				
				FileItem item = (FileItem) iter.next();
				if (item.isFormField()) {
					//processFormField(item);					
					fieldLabel = getFieldLabel(item);
					String fldNm = item.getFieldName();
					if (fldNm.equals("vendorname") 
						//do some stuff
					}					
					// other code
					if (fldNm.equals("department")) {
						validationMsg = processFormField(item, fieldLabel);
						if (validationMsg != null && !validationMsg .equals("")) {
							validationErrors.add(validationMsg);						
						} else {
							inquiry.setDepartment(item.getString());
						}					
					}
					//This is the field that refuses to work
					if (fldNm.equals("requesttype")) {
							validationMsg = processFormField(item, fieldLabel);
							if (validationMsg != null && !validationMsg .equals("")) {
								validationErrors.add(validationMsg);						
							} else {
								inquiry.setRequesttype(item.getString());					
							}					
						}
					//set session attributes
					session.setAttribute(fldNm, item.getString());					
				} else {
					//processUploadedFile(item);
				}			
			}

And this is my jsp (when the department field changes, onChange kicks off and sets the options in requesttype. I cannot seem to get jquery or my servlet to recognize that there is a value in requesttype when I submit):

<!-- the usual header stuff -->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js" language="JavaScript" ></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="inquiry.js"></script>

<script> 
$(document).ready(function() {	
$("#inquiryForm").validate({
    submitHandler: function(form){
        if(!this.wasSent){
            this.wasSent = true;
            $(':submit', form).val('Please wait...')
                              .attr('disabled', 'disabled')
                              .addClass('disabled');
            form.submit();
        } else {
            return false;
        }
    }
});
});
</script>
</head>  
 
<body onload="document.inquiryForm.vendorname.focus()"> 
<div id="wrap">
<div id="header"><%@ include file="header.html"%></div>
<form name="inquiryForm" id="inquiryForm" enctype="multipart/form-data" method="POST" action="servlet/Application" >
	<!-- removed various fields that work fine --->
	<table> 
		<tr>
			<td><label for="department">Issue Department</label></td>
			<td><em>*</em>
				<select name="department" id="department" class="required" onchange="changeOptions(window.document.inquiryForm.department.value);">								
					<option value="${department}">${department}</option>
					<option value="AR">AR</option> 
					<option value="Store AR">Store AR</option>
					<option value = "AP">AP</option>			 	 					
				</select>
			</td>
		</tr>		
		<tr>
			<td><label for="requesttype">Type of Request</label></td>
			<td><em>*</em>
				<select name="requesttype" id="requesttype">
					<option value="${requesttype}">${requesttype}</option>					
				</select>				
			</td>
		</tr>
<!-- removed various other stuff that works fine --->
	<input type="file" name="uploaded_file" />
	<input type="submit" name="submitButton" value="Submit"/>
<!-- removed footer and ending tags --->

Any ideas on where I've gone wrong? Thanks!

[K DeLucia]

I got it. After much hair pulling, I discovered that these lines:

document.inquiryForm.requesttype.options[1] = new Option("Paybacks/deductions", "");

should look like this:

document.inquiryForm.requesttype.options[1] = new Option("Paybacks/deductions", "Paybacks/deductions");

Everything is working beautifully now.