Question

我已经设置了一个使用Javascript中的Calculate（）函数执行某些基本计算的表单。它有4个QUANTITY选择框，当你更改时，“升”和“总金额”会更新。

该表单在Chrome和Opera中运行良好，但没有任何效果！在Firefox和Safari中。

您可以在此处查看 - http://jsfiddle.net/bksuru/ajsggpcg/

HTML：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="60" colspan="5" valign="top"><h2>Variants:</h2></td>
    </tr>
  <tr>
    <td height="40" align="left"><div class="variant">Flowers:</div></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" type="text" class="input5" id="flpr" tabindex="1" value="MRP 1495.00" readonly="readonly" /></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="flqt" type="text" size="1" class="select3" tabindex="1" oninput="calculate()">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select></label></td>
    <td height="45" align="right"><label>Litres<input name="flowers_litres" type="text" class="input6" id="fllt" tabindex="1" value="0.000" readonly="readonly" /></label></td>
  </tr>
  <tr>
    <td height="40" align="left"><div class="variant">Fruits:</div></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Size<select name="fruits_size" id="frsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Price<input name="fuits_price" id="frpr" type="text" class="input5" tabindex="1" value="MRP 1295.00" readonly="readonly" />
    </label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="fruits_quantity" id="frqt" type="text" class="select3" size="1" tabindex="1" oninput="calculate()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </label></td>
    <td height="45" align="right"><label>Litres<input name="fruit_litres" id="frlt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
    </label></td>
  </tr>
  <tr>
    <td height="40" align="left"><div class="variant">Plantations:</div></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" id="plpr" type="text" class="input5" tabindex="1" value="MRP 1195.00" readonly="readonly" />
    </label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="plqt" size="1" class="select3" tabindex="1" oninput="calculate()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </label></td>
    <td height="45" align="right"><label>Litres<input name="plantations_litres" id="pllt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
    </label></td>
  </tr>
  <tr>
    <td height="40" align="left"><div class="variant">Vegetables:</div></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Size<select name="vegetables_size" id="vesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Price<input name="vegetables_price" id="vepr" type="text" class="input5" tabindex="1" value="MRP 995.00" readonly="readonly" />
    </label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="vegetables_quantity" id="veqt" size="1" class="select3" tabindex="1" oninput="calculate()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </label></td>
    <td height="45" align="right"><label>Litres<input name="vegetables_quantity" type="text" class="input6" id="velt" tabindex="1" value="0.000" readonly="readonly" />
    </label></td>
  </tr>
  <tr>
    <td height="40" align="left"><div class="variant">Cereals:</div></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Size<select name="cereals_size" id="cesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Price<input name="cereals_price" id="cepr" type="text" class="input5" tabindex="1" value="MRP 895.00" readonly="readonly" />
    </label></td>
    <td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="cereals_quantity" id="ceqt" size="1" class="select3" tabindex="1" oninput="calculate()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </label></td>
    <td height="45" align="right"><label>Litres<input name="cereals_litres" id="celt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
    </label></td>
  </tr>
  <tr>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="total">
  <tr>
    <td align="left" valign="middle"><label class="variant">Total Amount:<input name="total_amount" type="text" class="input7" id="tamt" tabindex="1" value="MRP 0.00" readonly="readonly" /></label></td>
    <td align="right" valign="middle"><input name="Submit" type="button" class="button" value="SUBMIT"/></td>
  </tr>
</table>
    </tr>
    </table>

THE JAVASCRIPT：

function calculate() {
        var flowersSize = 200;
        var flowersPrice = 1495;

        var fruitsSize = 200;
        var fruitsPrice = 1295; 

        var plantationsSize = 200;
        var plantationsPrice = 1195;    

        var vegetablesSize = 200;
        var vegetablesPrice = 995;  

        var cerealsSize = 200;
        var cerealsPrice = 895; 

        var flowersQuantity = flqt.options[flqt.selectedIndex].value;
        var fruitsQuantity = frqt.options[frqt.selectedIndex].value;
        var plantationsQuantity = plqt.options[plqt.selectedIndex].value;
        var vegetablesQuantity = veqt.options[veqt.selectedIndex].value;
        var cerealsQuantity = ceqt.options[ceqt.selectedIndex].value;

        var flowersLitres = flowersSize * flowersQuantity / 1000;
        var fruitsLitres = fruitsSize * fruitsQuantity / 1000;
        var plantationsLitres = plantationsSize * plantationsQuantity / 1000;
        var vegetablesLitres = vegetablesSize * vegetablesQuantity / 1000;
        var cerealsLitres = vegetablesSize * cerealsQuantity / 1000;

        flowersLitres = parseFloat(Math.round(flowersLitres * 100) / 100).toFixed(3);
        fruitsLitres = parseFloat(Math.round(fruitsLitres * 100) / 100).toFixed(3);
        plantationsLitres = parseFloat(Math.round(plantationsLitres * 100) / 100).toFixed(3);
        vegetablesLitres = parseFloat(Math.round(vegetablesLitres * 100) / 100).toFixed(3);
        cerealsLitres = parseFloat(Math.round(cerealsLitres * 100) / 100).toFixed(3);

        fllt.value = flowersLitres;
        frlt.value = fruitsLitres;
        pllt.value = plantationsLitres;
        velt.value = vegetablesLitres;
        celt.value = cerealsLitres;

        var totalAmount = flowersQuantity * flowersPrice + fruitsQuantity * fruitsPrice + plantationsQuantity * plantationsPrice + vegetablesQuantity * vegetablesPrice + cerealsQuantity * cerealsPrice;

        totalAmount = parseFloat(Math.round(totalAmount * 100) / 100).toFixed(2);

        tamt.value = "MRP"+" "+totalAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

非常感谢任何帮助。

谢谢！

BK Suru

Answer 1

您正在使用onInput事件。此活动适用于input和textarea元素。不 select元素更具体地说

<input type="password">
<input type="search">
<input type="text">
<textarea>

改为使用onChange事件。

显然有些浏览器支持onInput其他元素，但这不是标准。

编辑（已添加示例）：

<select name="flowers_quantity" ... oninput="calculate()">

将其更改为：

<select name="flowers_quantity" ... onchange="calculate()">

Answer 2

只需将方法 oninput 更改为 onchange

Javascript calculate（）函数在Firefox和Safari中无效

2 个答案: