Javascript自动求和动态文本框

时间:2014-02-07 16:18:40

标签: javascript

我正在创建一个报价/订单页面,其中包含订单的不同类型的选项,所有这些选项的计算方式都不同。我有一个javascript函数,它将输入的值放在更改的文本框中,并在页面底部添加一个总计。我遇到的问题是基本产品可以是多种长度,许多选项价格由脚计算。所以我所做的是创建一个隐藏的字段,存储基本产品的长度和下拉菜单以选择选项。我有另一个javascript函数,它将这两个值相乘,并将总数放在一个应与第一个函数自动求和的文本框中。两者完全相互独立,但我遇到的问题是当乘法函数自动更新文本框时,“和函数的更改命令”无法被识别...

非常感谢任何帮助。

...代码

<script type="text/javascript">

function multiplyLengthWalls(){
var length = parseInt(document.getElementById('length').value, 10);
var walls = parseInt(document.getElementById('walls').value, 10);
var total = length*walls;

document.getElementById('wallstotal').value = total;
}


</script>



<script type="text/javascript">

    function sumCost() {
        var arr = document.getElementsByName('featuretotal');
        var tot = 0;
        for(var i=0; i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('totalcost').value = tot;

    }
</script>

... HTML

<td><select name="walls" id="walls" onchange="multiplyLengthWalls()">
            <?php
do {  
?>
            <option value="<?php echo $row_walls['dcost']?>"><?php echo $row_walls['name']?></option>
            <?php
} while ($row_walls = mysql_fetch_assoc($walls));
  $rows = mysql_num_rows($walls);
  if($rows > 0) {
      mysql_data_seek($walls, 0);
      $row_walls = mysql_fetch_assoc($walls);
  }
?>
          </select></td>
          <td><label for="wallstotal"></label>
          <input type="text" name="featuretotal" id="wallstotal" class="test" onchange="sumCost()"/></td>
        </tr>
        <tr>
          <td>Ceiling:</td>
          <td><label for="ceiling"></label>
            <select name="ceiling" id="ceiling">
              <?php
do {  
?>
              <option value="<?php echo $row_ceiling['dcost']?>"><?php echo $row_ceiling['name']?></option>
              <?php
} while ($row_ceiling = mysql_fetch_assoc($ceiling));
  $rows = mysql_num_rows($ceiling);
  if($rows > 0) {
      mysql_data_seek($ceiling, 0);
      $row_ceiling = mysql_fetch_assoc($ceiling);
  }
?>
          </select></td>
          <td><label for="ceilingtotal"></label>
          <input type="text" name="featuretotal" id="ceilingtotal" class="test" onchange="sumCost()"/></td>
        </tr>
        <tr>
          <td>Floor:</td>
          <td><label for="floor"></label>
            <select name="floor" id="floor">
              <?php
do {  
?>
              <option value="<?php echo $row_floor['dcost']?>"><?php echo $row_floor['name']?></option>
              <?php
} while ($row_floor = mysql_fetch_assoc($floor));
  $rows = mysql_num_rows($floor);
  if($rows > 0) {
      mysql_data_seek($floor, 0);
      $row_floor = mysql_fetch_assoc($floor);
  }
?>
          </select></td>
          <td><label for="floortotal"></label>
          <input type="text" name="featuretotal" id="floortotal" class="test" onchange="sumCost()"/></td>
        </tr>
      </table>
      <p>&nbsp;</p>
    </div>

    <div id="structural">structural</div>

    <div id="hidden">hidden -- 
      <input name="length" type="hidden" id="length" value="<?php echo $row_models['length']; ?>" />
    </div>
  </div>
  <div id="footer">

    <div id="total">total:<input name="totalcost" type="text" id="totalcost" readonly="readonly" /></div>

0 个答案:

没有答案