jquery - 为什么 jQuery val() 返回空/对象

Question

我正在开发一个根据输入自动计算用户利润的表单。这是我的 html 表单:

$(document).ready(function() {
  $('#inv_amount').keyup(function() {
    var invAmount = $(this).val();
    var profit = $('#profitPercent').val();
    var profCalc = +invAmount + ((profit / 100) * invAmount);
    $('#exp_earning').val(profCalc);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="inv_amount" class="control-label">Amount to Invest:</label>
    <input type="text" name="inv_amount" id="inv_amount" class="form-control" placeholder="Enter an amount" required="true">
  </div>
  <div class="form-group">
    <label for="exp_earning" class="control-label">Expected Earning:</label>
    <input type="text" name="exp_earning" id="exp_earning" class="form-control" placeholder="Your expected earning" disabled="true">
    <input type="hidden" name="profitPercent" id="profitPercent" value="12">
  </div>
</form>

编辑

利润计算正确，并且显示在表单中，但是当我检查表单时，exp_earning返回空。我还使用 console.log() 检查过，发现它返回的是一个对象，而不是值。

另一次编辑:有两件事我真的很想知道。

1. 为什么#exp_earning的值是这样的当我尝试提交表单时返回空，即使它在浏览器中可见。

2. 当我尝试使用 var outPut = $('#exp_earning').val(profCalc); console.log(outPut); 在浏览器控制台中查看该值时，为什么该值显示为对象？

Answer 1

问题是因为 #exp_earning 字段设置了 disabled 属性。这意味着提交表单时它将被排除在请求之外。

要解决此问题，只需删除 disabled 属性即可。如果您不希望用户能够编辑该值，请改用 readonly:

$(document).ready(function() {
  $('#inv_amount').keyup(function() {
    var invAmount = $(this).val();
    var profit = $('#profitPercent').val();
    var profCalc = +invAmount + ((profit / 100) * invAmount);
    $('#exp_earning').val(profCalc);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="inv_amount" class="control-label">Amount to Invest:</label>
    <input type="text" name="inv_amount" id="inv_amount" class="form-control" placeholder="Enter an amount" required="true">
  </div>
  <div class="form-group">
    <label for="exp_earning" class="control-label">Expected Earning:</label>
    <input type="text" name="exp_earning" id="exp_earning" class="form-control" placeholder="Your expected earning" readonly="true">
    <input type="hidden" name="profitPercent" id="profitPercent" value="12">
  </div>
</form>