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

Question

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

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

这里是thew完整代码

<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

使用keyup事件input并且使用的是相同的idresult为input和h3。我已将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>