Question

I am hopeful that someone can look at my code and let me know where it’s failing in FF. Basically, the onclick function is not firing. Here is the JS:

function clear_field(field) {
            if (field.value==field.defaultValue) {
                    field.value=''
            }
    }
function calsq(form) {
 var tonf = 0.010000000000000002; // cubic feet to tons
 var cyards = 0.037;
 var rwunit = eval(fill.rwunit.value); //ft or in
 var rwidth = eval(fill.rwidth.value); //quantity
 var rwv = (rwidth) / (rwunit); // value now in feet
 var rlunit = eval(fill.rlunit.value); //ft or in
 var rlength = eval(fill.rlength.value); //quantity
 var rlv = (rlength) / (rlunit); // value now in feet
 var rthick = eval(fill.rthick.value); //quantity
 var rtv = (rthick) / 12; // value now in feet
 var rcir = 0; // factor 1728 cubic inches
 var rcyr = 0; // factor 27 cubic yards

 fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards
}

And here is the form:

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">
      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <input type="button" onclick="javascript:calsq('fill')" src="soil_calculator/images/soil_calculate.png" value="calc" />
</form>

All other browsers fire the event and calculate the total, but Firefox does not. Any help is greatly appreciated.

UPDATED

A great many thanks for all the advice and suggestions. Below is the working code.

function calsq(form) {
var tonf = 0.010000000000000002; // cubic feet to tons
var cyards = 0.037;
var rwunit = +document.forms.fill.rwunit.value; //ft or in
var rwidth = +document.forms.fill.rwidth.value; //quantity
var rwv = (rwidth) / (rwunit); // value now in feet
var rlunit = +document.forms.fill.rlunit.value; //ft or in
var rlength = +document.forms.fill.rlength.value; //quantity
var rlv = (rlength) / (rlunit); // value now in feet
var rthick = +document.forms.fill.rthick.value; //quantity
var rtv = (rthick) / 12; // value now in feet
var rcir = 0; // factor 1728 cubic inches
var rcyr = 0; // factor 27 cubic yards
document.forms.fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards

}

and the form:

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">

      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <img src="soil_calculator/images/soil_calculate.png" width="160" height="43" alt="Calculate Volume" onclick="calsq('document.forms.fill')" style="cursor:pointer"/>
</form>

Thanks!

Answer 1

Just using fill isn’t a functional way to refer to the form in FF. See http://jsfiddle.net/nrabinowitz/yLELV/2/ for an example.

• The Click 1 button tries to reference fill; it works in Chrome but fails in FF.
• The Click 2 button refers to document.forms.fill, and works in both FF and Chrome.

As others have pointed out, I’m not sure this is the only problem in your script, but it’s definitely going to die with fill is not defined in FF.

As an aside, I see a lot of similar questions on SO, and my first question is always, why aren’t you using a framework library? If you want to do any kind of DOM manipulation, look into jQuery, Prototype, or MooTools – there’s no need to deal with this kind of problem yourself, when all of the frameworks have solved it in really reliable ways.