如何显示 keyup 事件的结果和表单内的值？

Question

如何在 keyup 事件而不是提交时显示输出以及输入字段中的值？

我试过只读 <input id="result" name="totalamount" value="" readonly/>但它不起作用。有人可以直升机吗？

这是完整的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
    $('#myForm').submit(function (event) {
        event.preventDefault();

        var actualprice = Number($("#actualprice").val().trim());
        var discount = Number($("#discount").val().trim());
        var shipping = Number($("#shipping").val().trim());

        var discountRate = (100 - discount) / 100;
        var result = (actualprice * discountRate) + shipping;

        $("#result").html("Result :" + result.toFixed(2));
    });
</script>


<form id="myForm">
    <input id="actualprice" type="number" placeholder="Actual Price">
    <input id="discount" type="number" placeholder="Discount">
    <input id="shipping" type="number" placeholder="Shipping">
    <input  id="result" name="totalamount" value="" readonly/>
    <h3 id="result"></h3>

    <input type="submit" value="Submit">
</form>

Answer 1

对 input 使用 keyup 事件，并且您对 input 和 h3 使用相同的 id result。我已将 h3 的 id 更改为 result2。

$('input').on('keyup input', function () {
  var actualprice = Number($("#actualprice").val().trim());
  var discount = Number($("#discount").val().trim());
  var shipping = Number($("#shipping").val().trim());

  var discountRate = (100 - discount) / 100;
  var result = (actualprice * discountRate) + shipping;
  
  $("#result").val("Result :" + result.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <input id="actualprice" type="number" placeholder="Actual Price">
    <input id="discount" type="number" placeholder="Discount">
    <input id="shipping" type="number" placeholder="Shipping">
    <input id="result" name="totalamount" value="" readonly />
    <h3 id="result2"></h3>

    <input type="submit" value="Submit">
</form>

如何显示 keyup 事件的结果和表单内的值？

Display results on keyup event and values inside form how to?

jquery

jquery-calculation

keyup