Javascript 个数学表单字段

Question

我正在构建一个带有一些 javascript 数学函数的表单，但似乎无法让第 3 个字段按我想要的方式工作

当您在蓝色价格框字段中输入 100 时 'How much would you like to be paid for selling this bottle'
然后将 25 放入正确的下一个字段中。
但 SELL PRICE INCLUDING TAX 字段不起作用，它应该取 100，然后添加下一个字段，因此在本例中为 125，然后乘以 1.125。给出答案 $140.63

https://www.cloudwine.com.au/list-private-wine

表单域

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

JAVASCRIPT

function output(){

    var startPriceV2 = jQuery( "#CAT_Custom_15" ).val();

    jQuery( '#CAT_Custom_14' ).val( parseInt(startPriceV2) * (0.25) ).toFixed(2);

    var cloudCom = jQuery( '#CAT_Custom_14' ).val();            

    jQuery( '#CAT_Custom_13' ).val( parseInt(startPriceV2) + parseInt(cloudCom) * (1.125) ).toFixed(2);

}

Answer 1

function output(){

  var startPriceV2 = jQuery( "#CAT_Custom_15" ).val();

    jQuery( '#CAT_Custom_14' ).val( (parseInt(startPriceV2) * (0.25)).toFixed(2) );

    var cloudCom = jQuery( '#CAT_Custom_14' ).val();            

    jQuery( '#CAT_Custom_13' ).val( (parseInt(startPriceV2) + parseInt(cloudCom) * (1.125)).toFixed(2) );

}

你搞砸了你的 .toFixed(2)

Answer 2

您的 toFixed() 在 jQuery 元素上，而不是数字值上。

另外，toFixed() returns一个字符串，我用+运算符把它转成一个数字。

我已将计算结果存储在变量中，而不是再次从您的页面中获取它们。这通过减少 jQuery 调用来提高性能..

将 JS 更改为：

function output(){
                 
  var startPriceV2 = +jQuery( "#CAT_Custom_15" ).val();
  var tax = +(startPriceV2 * (0.25)).toFixed(2);
  var cloudCom = +((startPriceV2 + tax) * 1.125).toFixed(2);      

  jQuery( '#CAT_Custom_14' ).val( tax );  
  jQuery( '#CAT_Custom_13' ).val( cloudCom );

}

label {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

您也可以在没有 jQuery 的情况下执行此操作，这是许多开发人员的首选。

function output(){   

  var priceInput = document.getElementById('CAT_Custom_15');
  var commisionInput = document.getElementById('CAT_Custom_14');
  var totalInput = document.getElementById('CAT_Custom_13');
                 
  var startPriceV2 = +priceInput.value;
  var commision = +(startPriceV2 * (0.25)).toFixed(2);
  var cloudCom = +((startPriceV2 + commision) * 1.125).toFixed(2);   
  
  commisionInput.value = commision;
  totalInput.value = cloudCom;

}

label {
  display:block;
}

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

Answer 3

到目前为止，数字舍入只是次要的（而且毫无意义）。您的案例是正确的架构和良好实践之一，例如不对计算字段使用输入字段，也不从您的 html 代码中附加事件处理程序：使用 jQuery 也非常适合附加处理程序。

我还发现 'onchange' 事件处理程序没有产生预期的结果，因此我将其更改为 'onblur'。我无法解释原因，但我不会深入研究它，因为从 html 内附加处理程序绝对不推荐使用。

至于开发和实践模式，试试这个——'noiseless' 片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #commission {
            width: 60px;
            height: 20px;
            border: 1px solid blue;
        }
        #finalPrice {
            width: 60px;
            height: 20px;
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    How Much? <input type="text" onblur="output();" id="price">
    <br>
    Cloudwine comm.: <div id="commission"></div>
    Price: <div id="finalPrice"></div>


    <script>
        function output ()
        {
            let priceValue = Number ($('#price').val()),
                resultCommission = Number (priceValue *.25),
                firstAddition = priceValue + resultCommission,
                resultFinal = firstAddition + firstAddition *.125 ;

            $('#commission').html (resultCommission);
            $('#finalPrice').html (resultFinal);
        }
    </script>
</body> 
</html>

我猜您是因为格式化而转向这些输入字段的。不要这样做，请改用 CSS（尤其是 'float' 规则）。

此外，我已明确将值强制转换为 Number：JS 是一种非常松散的语言，如果不注意，可能会出现奇怪的结果。

Javascript 个数学表单字段

Javascript math form fields

javascript

forms

math

input-field