JavaScript form works in Chrome but not in Firefox

Question

I'm just finishing off an assignment which required me to build a little form that totals order details etc. It works perfectly fine in Chrome, but I ran a test in Firefox (as the assessors will be using that) and it fails to work at all. Any tips or solutions as to why would be appreciated. Thanks

JavaScript

function list(theform){

  var mem = theform.elements["mem"].value;
  var cov = theform.elements["cover"].value;
  var cha = theform.elements["charger"].value;
  var scr = theform.elements["screen"].value;
  var del = theform.elements["delivery"].value;
  var qty = theform.elements["qty"].value;


  acc = (parseInt(mem) + parseInt(cov) + parseInt(cha) + parseFloat(scr) + parseInt(del)) * qty;

  total.value = "$" + Math.round(acc*100)/100;
  return false;
}

HTML

<form id="accform" onsubmit="return list(this)">

        <label class="third column" for="memory">Memory</label>
        <label class="third column" for="case">Case</label>
        <label class="third column" for="memory">Charger</label>

        <select  class="third column" id="mem" name="mem">
          <option value="0">2GB : No charge</option>
          <option value="5">4GB : $5.00</option>
          <option value="12">8GB : $12.00</option>
          <option value="24">16GB : $24.00</option>
        </select>

        <select  class="third column" id="cover" name="cover">
          <option value="0">No case </option>
          <option value="4">Leather case : $4.00 </option>
          <option value="4">Silicon case : $4.00 </option>
        </select>

        <select  class="third column" id="charger" name="charger">
          <option value="0">No charger </option>
          <option value="5">Car charger : $5.00 </option>
          <option value="6">Car charger holder : $6.00 </option>
        </select> 

        <label class="third column" for="memory">Screen protector</label>
        <label class="third column" for="case">Shipping</label>
        <div class="full column"></div>

        <select  class="third column" id="screen" name="screen">
          <option value="0">None</option>
          <option value="0.99">x1 : $0.99</option>
          <option value="1.79">x2 : $1.79</option>
          <option value="2.39">x3 : $2.39</option>
          <option value="3.40">x5 : $3.40 </option>
        </select>
        <select  class="third column" id="delivery" name="delivery">
          <option value="0">Normal shipping : No charge </option>
          <option value="35">Expedited Delivery (Fedox) : $35.00</option>
        </select>
        <div class="full column">
        </div>

        <label class="third column" for="qty">Quantity</label>
        <label class="third column" for="total">Total</label>
        <div class="full column">
        </div>

        <div class="third column">
        <input  id="qty"/>
      </div>
        <input class="third column "id="total"/>

        <button class="submit">Calculate</button>
        <div class="full column">
        </div>

      </form>

Not the answer, but a good note, make sure your
and
tags are not in different elements (i.e. a and after ) otherwise, it may not work in FF or IE (but will in Chrome >.>) — Gaʀʀʏ, Oct 01 '12 at 04:17

Fabrício Matté · Accepted Answer · 2012-05-27T01:40:31.387

Your script works fine on my Firefox, even though it was emitting an warning in the console:

Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

That was because total wasn't defined inside your function, try:

document.getElementById('total').value = "$" + Math.round(acc*100)/100;

JSFiddle <-- Tested on Nightly 15a

Check if it helps and whether the fiddle works or not in your Firefox.

Also, as noted by @dibs, you can define acc by adding var in front of it:

var acc = (parseInt(mem) + parseInt(cov) + parseInt(cha) + parseFloat(scr) + parseInt(del)) * qty;

But that is unlikely to give you any trouble, besides maybe accidentally creating a global-scope variable.

dibs · Answer 2 · 2012-05-27T01:37:01.100

0

Try linting your script at jslint.com to see what errors you have in there.

'acc' was used before it was defined.

edited May 27 '12 at 01:37

answered May 27 '12 at 01:28

dibs

1,018
2
23
35

In JavaScript you don't have to define a variable before use. – Derek 朕會功夫 May 27 '12 at 01:44
@Derek is right, jslint is a little too demanding in the validations sometimes. – Fabrício Matté May 27 '12 at 01:47
2

Not declaring a variable automatically makes it global. So it's good practice to always declare so as to avoid issues with scope. http://stackoverflow.com/questions/2485423/javascript-is-using-var-to-declare-variables-optional – dibs May 27 '12 at 02:12

JavaScript form works in Chrome but not in Firefox

2 Answers2