为什么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>

Answer 2

其实你已经禁用了该字段。请删除disabled="true"并尝试。

如果你希望那个用户不能改变这个字段，那么你可以添加属性readonly="readonly"。

我希望这会帮助你。

Answer 3

如果你的意思是这样的：

$('#exp_earning').val(profCalc); 

...返回一个对象是预期的行为，如documented：

.val(value)返回：jQuery

作为浏览器的DOM检查器，它通常会显示实际的HTML属性，它不一定反映DOM属性的值。

最后，disabled attribute防止被提交的<input>（其他动作中）：

该布尔属性指示该窗体控制不可用于相互作用。特别是，click事件不会在禁用的控件上分派。另外，禁用控件的值不会以的形式提交。