<script>// <![CDATA[
(function($) {
 
var races= [ {num:0, name:'Elves'},
             {num:1, name:'Dwarves'}];
 
var els = [{n:"Battering Rams",m: 24, r:0},
{n:"Boar Archers",m: 72, r:1},
{n:"Boar Riders",m: 16, r:1 },
...
];
 
 $(document).ready (
   function() {
 
    $('form[name="calc"]')
     .prepend($('<fieldset/>').append($('<legend/>').html('&nbsp;&nbsp;&nbsp;Select your race&nbsp;&nbsp;&nbsp;')))
 
   for (var i=0; i<races.length; i++) {
       $('form[name="calc"] fieldset:first')
 
     .append(
          $('<span/>').css('margin-right',40).html('&nbsp;&nbsp;'+races[i].name).prepend($('<input/>',{name:'selrace', type:'radio', value:races[i].num}))
         )
   } 
 
//------------------------------
 $('input[name="selrace"]').click ( 
  function() {
   var race = this.value;
 
   $('select[name="unit_type"]').empty();
   sel = document.forms.calc.unit_type;
 
   for (var i=0; i<els.length; i++) {
       if (els[i].r!=race)
          continue;
       var opt = new Option (els[i].n, els[i].m,  false, false);
 
                        try {
                           sel.add(opt, null);
                        } catch (e)
                        {
                           sel.add(opt);
                        }
 }
}).eq(0).click();
 
//--------------------------
$('form').submit(
   function() {
     var might = parseInt(this.unit_type.value)*parseInt(this.packsize.value)*parseInt(this.numpacks.value);
 
 
     var restab = $('#resulttable');
 
     if (restab.length==0) {
        $('form[name="calc"]').before($('<table/>',{id:'resulttable'}).css('background','#efe'));
 
       restab = $('#resulttable').get(0);
       var header = restab.createTHead();
       var row = header.insertRow();
       a= ['Troop name','Pack','Pack might','Owned','Tot. might']
       for (var i=0; i<a.length; i++ ) {
       var cell = row.insertCell();
       cell.innerHTML = a[i];
       }
     }
 
    restab = $('#resulttable').get(0);
    var tbody =  restab.tBodies[restab.tBodies.length-1] || restab;
 
    var row = tbody.insertRow();
    var cell = row.insertCell();
    cell.innerHTML = this.unit_type.options[this.unit_type.selectedIndex].text;
    cell = row.insertCell();
    cell.innerHTML = this.packsize.value;
    cell = row.insertCell();
    cell.innerHTML = parseInt(this.unit_type.value)*parseInt(this.packsize.value)
 
     cell = row.insertCell();
     cell.innerHTML = this.numpacks.value;
     cell = row.insertCell();
     cell.innerHTML = might;
 
     return false;
 })
 
})
 
})(jQuery)
// ]]></script>
 
<form enctype="application/x-www-urlencoded" method="post" name="calc">
<fieldset>
<p>Input Unit type &nbsp;&nbsp;&nbsp;
   <select style="width:70%" name="unit_type">
   </select></p>
<p>Pack size <input style="width:70px" name="packsize" type="number" size="4" value="0" />
Number of packs <input style="width:70px" name="numpacks" type="number" size="4" value="0" />
<input style="padding:10px" name="submit" type="submit" value="Calculate" /></p></fieldset>
 
</form>