爲什麼jQuery val（）返回空/對象

我正在基於輸入自動計算用戶利潤的表單上工作。這是我的HTML表單：爲什麼jQuery val（）返回空/對象

$(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（），我發現它是返回一個對象，而不是值。

其他編輯：我真的很想知道兩件事情。

爲什麼#exp_earning返回空值，當我嘗試提交表單，即使它是在瀏覽器中可見。
爲什麼當我嘗試在我的瀏覽器控制檯中使用var outPut = $('#exp_earning').val(profCalc); console.log(outPut);查看該值時，該值顯示爲對象？

來源

2017-06-14 Samuel Asor

是的，我試圖驗證使用php'空（）'。 –

我輸入'1000'並獲得'1120'。爲了那些不是經紀人的使用者的利益，能否請你解釋爲什麼1120不是預期的輸出，預期的結果以及它與jQuery.val（）的關係？ –

在Chrome上它可以工作：[示例]（https://jsfiddle.net/ubkvvwh5/） – Uncoke

問題是因爲#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>

來源

2017-06-14 08:28:55

將屬性更改爲readonly =「true」適用於服務器端驗證。但爲什麼當我在控制檯中檢查它時顯示爲對象？ –

這完全取決於你在'console.log（）'中調用的內容 –

我已經完成了'var outPut = $（'＃exp_earning'）.val（profCalc）; console.log（outPut）'，並返回一個對象。另外，當我嘗試檢查DOM中的元素時，我看不到新的值。 –

其實你已經禁用了該字段。請刪除disabled="true"並嘗試。

如果你希望那個用戶不能改變這個字段，那麼你可以添加屬性readonly="readonly"。

我希望這會幫助你。

來源

2017-06-14 08:28:22

如果你的意思是這樣的：

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

...返回一個對象是預期的行爲，如documented：

.val(value)返回：jQuery

作爲瀏覽器的DOM檢查器，它通常會顯示實際的HTML屬性，它不一定反映DOM屬性的值。

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

該布爾屬性指示該窗體控制不可用於相互作用。特別是，click事件不會在禁用的控件上分派。另外，禁用控件的值不會以的形式提交。

來源

2017-06-14 09:37:27

爲什麼jQuery val（）返回空/對象

回答

相關問題