Расчетная цена

Question

У меня есть веб-страница, где пользователь может искать и выбирать для бумаги определенного типа на основе элемента, выбранного из выпадающего списка. Затем поиск вернется и отобразит полное имя бумаги вместе с ценой и значением пакета, которые все вытащили из моей базы данных. Мне нужно вычислить (желательно динамически) общую цену, которая равна (quantity * price)/per_pack. Поэтому, когда пользователь меняет количество, общее изменение цены. Я пришел через несколько решений, которые работают в рамках своего собственного сценария, однако, мне было интересно, если есть способ сделать это без того, чтобы указать цену в значение атрибута, например:

Не нравится:

<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()"