Form onChange計算

我有一個經典的asp表單來將產品添加到網站。該表格有'價格'，'銷售'價格和'銷售'複選框三個字段。Form onChange計算

我想要做的是，當用戶輸入'價格'並勾選'正在銷售'複選框時，某些javascript會以'價格'的值完成'銷售價格' - 10％。

想知道是否有人可能知道如何做到這一點？：D

謝謝。

2010-09-29 doubleplusgood

HTML：

Price:<br> 
<input type="text" name="price" id="price"><br> 
<br> 
Sale price:<br> 
<input type="text" name="sale_price" id="sale_price"><br> 
<br> 
<input type="checkbox" name="on_sale" onchange="calculate_sale_price(this);"> On sale

的Javascript：

function calculate_sale_price(checkbox) 
{ 
    price = document.getElementById('price'); 
    sale_price = document.getElementById('sale_price'); 
    sale_price.value = checkbox.checked ? price.value * 0.9 : price.value; 
}

如果你想，如果沒有選中該複選框售價是空的，改變這一行：

sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;

到：

sale_price.value = checkbox.checked ? price.value * 0.9 : '';

來源

2010-09-29 11:37:24 Mischa

非常感謝。：D如果複選框沒有被選中，是否容易得到sale_price字段爲空，而不是投入價格？ :) – doubleplusgood 2010-09-29 11:51:53

是的，如果未選中複選框，則很容易使其爲空。看到我上面更新的答案。 – Mischa 2010-09-29 11:56:40

你可能想添加一些驗證，以防用戶輸入一些愚蠢的字樣。最簡單的方法可能是（+ price> 0 && checkbox.checked） – cm2 2010-09-29 12:02:01

將與HTML更容易），這樣的事情會做的伎倆：

$('#yourCheckBox').change(function(){ 
    if($("#yourCheckBox option:selected").length){ 
    $('#yourSalePrice').val(
     $('#yourPrice') - (($('#yourPrice').val()/100)*10) 
    ); 
    } 
});

你也可以，如果那裏有價格上的數值計算任何事情之前增加一些檢查

來源

2010-09-29 11:32:56 Hannes

我在發佈了一個演示：jsbin的基礎上，下面的標記：

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(
     function() { 
     $('#onSale').change(
      function() { 
      var salePrice = $('#price').val() * 0.9; 
      $('#salePrice').val(salePrice); 
      } 
     ); 
     } 
    ); 

    </script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 

<form method="post" action=""> 
    <fieldset> 
    <label for="price">Price:</label> 
    <input type="text" id="price" name="price" /> 

    <input type="text" name="salePrice" id="salePrice" disabled="disabled" /> 
    <input type="checkbox" name="onSale" id="onSale" /> 
    </fieldset> 
</form> 

</body> 
</html>

我建議你需要驗證，以建立由用戶輸入的價格（確保它是一個數值代價，FO一開始）。我已將#salePrice禁用，因此用戶不太可能輸入數據（儘管這不是不可能的）。

響應OP的評論編輯。

要清除該領域的用戶未蜱的複選框後：

$(document).ready(
    function() { 
    $('#onSale').change(
     function() { 
     if ($('#onSale').is(':checked')) { 
      var salePrice = $('#price').val() * 0.9; 
      $('#salePrice').val(salePrice); 
     } 
     else { 
      $('#salePrice').val(''); 
     } 
     } 
    ); 
    } 
);

注意新if/else，這裏是the revised demo

來源

2010-09-29 11:42:38

非常感謝。：D如果複選框沒有被選中，是否容易得到sale_price字段爲空，而不是投入價格？ :) – doubleplusgood 2010-09-29 11:52:24

你的意思是空*之前*複選框被選中？或以其他方式？ – 2010-09-29 11:58:21

嘿大衛。如果他們再次取消選中複選框，銷售價格字段可能會變回空。 – doubleplusgood 2010-09-29 12:01:18

正如其他人通過他們的代碼所示，你可以做到這一點通過增加該複選框的事件偵聽器。它很乾淨並且不妨礙ASP表單代碼。既然你把jQuery，這是我的承擔;當然還有其他解決方案，但我覺得這是一個簡潔和可讀性好的組合。祝你好運！

$('#chkbox').bind('click', function(evt){ 
     var sale = (evt.target.checked); 
     var price = $('#fullprice').val(); 
     var disc = (+price > 0 && sale) ? price*.9 : '' 
     $('#saleprice').val(disc); 
    });

來源

2010-09-29 11:57:57 cm2

Form onChange計算

回答

相關問題