Using JavaScript in Pages & Posts in TinyMCE

I’m trying to move an existing website into WordPress as a CMS, and it’s going great except for a couple key things. In one particular instance, I have a web form that uses inline Javascript functions to automatically recalculate some values when fields in the form are changed. All the functions are in an external Javascript file that is called in my theme’s header, so that’s all good. The problem is in entering the HTML for the form to call the Javascript function(s) when an input value is changed.

The original HTML form looks like this:

<form name="dues_calc">
<table border=0 cellspacing=2 align="center">
<tr>
<th align=RIGHT>Organization:</th>
<td><select onchange="compute(this)" name="organization">
<option value="aas">Arnold Air Society</option>
<option value="sw">Silver Wings</option>
</select></td>
</tr>
<tr>
<th align=RIGHT>Number of Membership Renewals:</th>
<td><input onchange="compute(this)" name="renewals" type=Text size="5" maxlength="5" value="0"><tt> * <input type="text" name="renewal_dues" size="6" maxlength="6" readonly value="$35.00" disabled> +</tt></td>
</tr>
<tr>
<th align=RIGHT>Number of New Initiates:</th>
<td><input onchange="compute(this)" name="initiates" type=Text size="5" maxlength="5" value="0"><tt> * <input type="text" name="initiate_dues" size="6" maxlength="6" readonly value="$45.00" disabled> +</tt></td>
</tr>
<tr>
<th align=RIGHT>Number of New Honorary Members:</th>
<td><input onchange="compute(this)" name="honoraries" type=Text size="5" maxlength="5" value="0"><tt> * <input type="text" name="honorary_dues" size="6" maxlength="6" readonly value="$ 5.00" disabled> =</tt></td>
</tr>
<tr>
<th align=RIGHT>TOTAL NATIONAL DUES:</th>
<td><input onchange="compute(this)" name="totalDues" type=Text size="13" maxlength="13" value=" $ 0.00" readonly disabled></td>
</tr>
</table>
</form>

When I enter this into the TinyMCE using the HTML editor, the Javascrtipt hooks in the various form fields (i.e. “onchange” function calls, etc.) are completely stripped away, leaving me with the following code and a non-functional form:

<form name="dues_calc">
<table cellspacing="2" border="0" align="center">
<tr>
<th align="right">Organization:</th>
<td><select name="organization"> <option value="aas">Arnold Air Society</option> <option value="sw">Silver Wings</option> </select></td>
</tr>
<tr>
<th align="right">Number of Membership Renewals:</th>
<td><input type="text" value="0" maxlength="5" size="5" name="renewals" /><tt> * <input type="text" value="$35.00" maxlength="6" size="6" name="renewal_dues" /> +</tt></td>
</tr>
<tr>
<th align="right">Number of New Initiates:</th>
<td><input type="text" value="0" maxlength="5" size="5" name="initiates" /><tt> * <input type="text" value="$45.00" maxlength="6" size="6" name="initiate_dues" /> +</tt></td>
</tr>
<tr>
<th align="right">Number of New Honorary Members:</th>
<td><input type="text" value="0" maxlength="5" size="5" name="honoraries" /><tt> * <input type="text" value="$ 5.00" maxlength="6" size="6" name="honorary_dues" /> =</tt></td>
</tr>
<tr>
<th align="right">TOTAL NATIONAL DUES:</th>
<td><input type="text" value=" $ 0.00" maxlength="13" size="13" name="totalDues" /></td>
</tr>
</table>
</form>


I’m entering this code as an Administrator, so my HTML isn’t being stripped out due to role. I’ve tried using the Text Control plugin, but that isn’t doing anything — I suspect this problem is within TinyMCE itself (which seems to be reinforced by TinyMCE re-ordering various attributes in the tags from what I cut-and-paste into the HTML editor, as you can tell). Any ideas on how to (1) fix it, or (2) work around it?

Thanks in advance to everyone…