Question

我有一个网页，用户可以根据从下拉列表中选择的项目搜索并选择特定类型的纸张。然后搜索将返回并显示纸张的全名以及价格和每包价值，这些都是从我的数据库中提取的。我需要计算（最好动态地）总价格(quantity * price)/per_pack。因此，当用户更改数量时，总价格会发生变化。我遇到了几个在他们自己的场景中工作的解决方案但是，我想知道是否有办法这样做而不必在value属性中指定价格，例如：

不喜欢这样：

<input type="text" name="price" id="price" class="txt" size="10" maxlength="9" value="250" />

我尝试过做这样的事情，但它似乎没有效果，就像我输入数量时似乎没有任何事情发生，而且总框只是空白：

JavaScript的：

$(function() {
window.globalVar = 0;

// Skip the filled description boxes
for (var i=0; i<10; i++)
{
    if($('#description_'+window.globalVar).val() != "")
    {
        window.globalVar++;
    }
}

// Write the paper description and price for the selected paper
function log( message ) {
    var values = message.split('|');
    $('#description_'+window.globalVar).val(values[0]);
    $('#priceper_'+window.globalVar).val(values[1]);
$('#per_pack_'+window.globalVar).val(values[2]);
    window.globalVar++;
    console.log(window.globalVar);
}

// Search the Paper db
$( "#supplier_search" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://mpc.vario/mis_pp/common/pp_json",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 25,
        name_startsWith: request.term,
        supplier: $('#supplier').val()
      },
      success: function( data ) {
        console.log(data);
        response( $.map( data, function( item ) {
          return {
            label: item.name,
            value: item.name + '|' + item.value
          }
        }));
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    log( ui.item.value );
    $(this).val('');
    return false;
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
});
});

// Calculate total
var sum = 0;
document.getElementById('priceper_0').value = sum;
function OnChange(value)
{
price = document.getElementById('priceper_0').value;
    per_pack = document.getElementById('per_pack_0').value;
quantity = document.getElementById('quantity_0').value;
sum = (price * quantity)/per_pack;


}

HTML：

<tr class="multipp">
<td><input type="text" name="description_0" id="description_0" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" class="txt" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" class="quantity_0" size="10" maxlength="9" value="" onchange="return OnChange();" /></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" class="txt" size="10" maxlength="9" value="" /></td>
</tr>

Answer 1

你在错误的地方调用js函数，改变：

<input type="text" name="quantity_0" id="quantity_0" class="quantity_0" size="10" maxlength="9" value="OnChange()"/>

到

<input type="text" name="quantity_0" id="quantity_0" class="quantity_0" size="10" maxlength="9" value="" onchange="return OnChange();"/>

Answer 2

问题在于调用方法

替换以下

 value="OnChange()"

到

 onchange="OnChange()"

计算总价

2 个答案: