When Browser Oddities Strike: <option> Value Handling

I’m developing a web-based inventory system for one of my company’s department. All of the input functions are up and I was doing the reporting bits.

A function that I’m working on for the past few hours is pretty simple; get a historical activity report for a deleted item. I figured that this should be a quick query away and decided to AJAXify this section of the system.

I’ve been doing basic AJAX stuff like this for ages, mainly looking up a value of an element and then looking up a database table for matches. The only difference for this particular project is that I’m grabbing the value to be looked up from a <select> list, instead of the all-too-familiar <input> tag.

Here’s a sample of code for the form that’s similar to what I’m using in this feature:

<form id="delprodreports">
<table class="formtable">
<tr>
<th>Product</th>
<td><select name='oid' id='oid' onchange='sendReqDP()'>
<option>Choose a product</option>
<option>BPJ-FUBS-00201</option>
<option>JPP-FUBS-00199</option>
<option>JPP-FUBS-00200</option>
<option>JPP-FUBS-00202</option>
</select></td></tr>
</table>
</form>

<div id="delprodrepchild">
</div>

sendReqDP is the JavaScript function that will call a PHP file that will query the database for the history of the product code selected, the results will then be HTMLised and outputted in the <div> with the delprodchild id immediately below the form. Pretty straight-forward textbook stuff. It looks like this:

function sendReqDP() {
setval = document.getElementById('oid').value;
req.open('GET', 'ajaxhandler.php?op=delprod&id=' + setval, true);
req.onreadystatechange = hRdelprod;
req.send(null);
}

It works as intended in Firefox and I thought it was a done deal then. However, when I switched to IE, there’s not output from the AJAX call! Capturing the SQL call sent, I noticed that the value of the selected <option> was not being passed to the processing PHP file.

I thought this was a bug, or at least a quirk in IE. However, after reading this <option> tag information on W3Schools, it seems that how IE works is actually the correct way of retrieving values from <option> tags! Wow, that’s something that you don’t get to see often 😉

Anyway, the solution to this problem is to include a value attribute to the options, even if they are the same with the displayed value. My fixed <select> group is as follows:

<form id="delprodreports">
<table class="formtable">
<tr>
<th>Product</th>
<td><select name='oid' id='oid' onchange='sendReqDP()'>
<option>Choose a product</option>
<option value='BPJ-FUBS-00201'>BPJ-FUBS-00201</option>
<option value='JPP-FUBS-00199'>JPP-FUBS-00199</option>
<option value='JPP-FUBS-00200'>JPP-FUBS-00200</option>
<option value='JPP-FUBS-00202'>JPP-FUBS-00202</option>
</select></td></tr>
</table>
</form>

<div id="delprodrepchild">
</div>

Hopefully this post will help others who were in the same boat as me.